Refused to load the script xxxxxx because it violates the following Content Security Policy directive: "Script-src ' self ' x Xxxxxxxxxxxx "Browser security issues

Today in the company ran into a problem like this: the general problem is that I put the newly generated foreign CDN path to the page to view, and found that there will be similar to the following error message

Refused to load the script xxxxxx because it violates the following Content Security Policy directive: "Script-src ' self ' x Xxxxxxxxxxxx "

The original picture is gone, I posted this picture on the blog of Ruan Yi Peak, this problem is mainly due to the browser in order to prevent cross-domain scripting attacks, and the introduction of "Web Security Policy" (Content security Policies, abbreviated CSP),

And my nginx server opened the CSP, so the resources under another domain name cannot start the JS script.

The meaning of CSP is as follows:

#激活内容安全策略Content Security Policy (CSP), most browsers support
# tell the browser to download scripts only from this domain name and the URL you explicitly specify.

Next is to modify the Nginx configuration, understand the following concepts, I found the original Unsafe-inline point to the CDN domain name, using the wildcard * so that all the two-level domain names are compliant with Unsafe-inline

Last Access Successful!

Summary: First you have put the resource file into the server, the configuration of Nginx, can run normally, you want to make a limit to the browser, want to make a safe, do not want to let outsiders on your website inject virus script, so you add Add_header on Nginx configuration Content-security-policy, write the URL you need to access, so you can complete the CSP.

Refused to load the script xxxxxx because it violates the following Content Security Policy directive: "Script-src ' self ' x Xxxxxxxxxxxx "Browser security issues