Services often encounter white screen problems, one of the main reasons is that resources are blocked by the CSP policy, so what is the CSP? How to solve this problem?

What is a CSP?

Content Security Policy (CSP) is an additional layer of security that helps detect and mitigate certain types of attacks, including cross-site scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to website defacing or malware distribution.

Why CSP?

The primary goal of the CSP is to reduce and report XSS (Cross Site Scripting) attacks. In general, the same origin policy only restricts THE HTML document of a web page, while other static resources such as javascript, CSS and images can still be loaded. XSS attacks, on the other hand, exploit the browser’s trust in content retrieved from the server. CSP adds a layer of whitelist to this foundation, only the content in the whitelist can be trusted.

How does it work?

As mentioned above, XSS takes advantage of the browser’s trust in HTML to load resources to perform some illegal operations. A CSP whitelists access to resources, and only resources in the whitelist can be trusted.

For example, static resources loaded by HTML documents are considered safe by browsers without CSP Settings.

However, if there are malicious scripts in these resources, the browser can not recognize the malicious scripts, or assume that they are safe to load, resulting in tragedy

When we add a CSP configuration that tells the browser what is safe to load, malicious scripts are filtered out, preventing attacks

So where is this whitelist configured and what rules tell the browser what is safe to load?

The CSP can be configured in either of the following ways:

Header

You can do this using the Content-security-Policy HTTP response header

Content-Security-Policy: default-src 'self'; script-src userscripts.example.com
Copy the code

Meta

Or use meta tags, but this is not recommended and should be placed at the top of the HTML

<meta http-equiv="Content-Security-Policy" content="default-src 'self' *.xx.com *.xx.cn 'unsafe-inline' 'unsafe-eval';" >Copy the code

Header and Meta are not to be used together. CSP is based on The most stringent CSP policies. This may cause problems and result in invalid configurations.

What are the rules of CSP?

A typical CSP HTTP Header looks like this

Content-Security-Policy: 
base-uri 'self';
object-src 'self';
script-src 'self' 'unsafe-eval' 'unsafe-inline' 'report-sample' *.xxx.com; 
frame-src 'self' *.xxx.com;
report-uri https://xxx.log.xxx.com
Copy the code

base-uri

Used to control the range of resources that the base tag can load

object-src

Prevents the browser from loading plug-in resources, or tags, that perform the embedding. The most common example is to prevent Flash Based XSS

script-src

Used to control the scope of the script that the browser loads the page, including the loaded URL and the inline script, and

  • The ‘self’ directive loads the JS resource in the current domain
  • ‘unsafe-inline’ This directive value allows inline script loading
  • The ‘unidentive-eval’ directive value allows the page to load JavaScript functions such as eval(), new Founction(), and timer
  • When an external XSS attack is attempted or a script triggers a violation, the browser asynchronously sends the first 40 bytes of the payload to the link corresponding to the report-URI, which can be used to locate XSS vulnerabilities and check the location of inline scripts during CSP development
  • ‘*.xxx.com’ allows js scripts to be loaded under this domain name

frame-src

Used to control the range of iframe resources loaded by the browser, where:

  • The ‘self’ directive loads the JS resource in the current domain
  • ‘*.xxx.com’ allows iframe scripts to be loaded under this domain name

report-uri

As mentioned above, it is used to define the address for reporting

Note: the above is only a rough introduction to the rules, CSP rules are very complex, if you encounter problems need to consult the documentation to resolve **

CSP intercepts illegal loading very well, but in the actual business, it is easy to cause the CSP configuration problems that we normally need to load resources cannot be loaded, so when we encounter such problems, how to solve it?

Business location

What can be caused by CSP?

As long as you see such an error in the console, it must be CSP

What if YOU encounter CSP problems?

  1. CSP error found when opening console

  2. Read the newspaper incorrectly, which domain name and which type of loading problem

    1. The domain name to be blocked must be added to frame-src when Refused to load iframe resources
    2. The domain name to be blocked in script-src was Refused to load the script
    3. .

  3. validation

    1. Verifying chrome plug-ins

      1. Chrome.google.com/webstore/de…

    2. Charles breakpoint verification

  4. After the verification is successful, contact the server to add the configuration and tell the server what needs to be added or modified. You can also send the header that has been configured successfully for reference

In addition: For some complex problems that cannot be solved by adding a domain name, you are advised to consult official documents

www.w3.org/TR/CSP/ (le…

reference

www.verydoc.net/http/000042…

www.ruanyifeng.com/blog/2016/0…

www.freebuf.com/articles/we…