Electron + MySQL throws security warning

I've installed Electron and MySql and got them working well together.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>Hello world</h1>
</body>


<script>
  var mysql = require('mysql');
  var connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'blog'
  });

  connection.connect();

  connection.query('SELECT * FROM posts', function (error, results, fields) {
    if (error) throw error;
    console.log(results);
  });

  connection.end();
</script>

</html>

Then in the window I get a security error.

index.html:16 Uncaught ReferenceError: require is not defined

I noticed that I could override it like below.

win = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true
    }
  });

I've read it's dangerous and not recommended? I also get a warning when doing so.

Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security Policy set or a policy with "unsafe-eval" enabled. This exposes users of this app to unnecessary security risks.

How can I get around it?