Some test cases about Web Content-Security-Policy Directive specified by meta element

A Content Security Policy is a policy that uses header or meta elements to restrict or approve content loaded on a given website. This is a widely supported security standard that all website operators should be aware of.

Using a CSP adds a layer of protection to a Web site by stating which rules are allowed or not allowed. These rules help protect against content injection and cross-site scripting (XSS) attacks, two of OWASP's top ten web application security risks.

An XSS attack occurs when an attacker is able to compromise an unprotected website by injecting malicious code. When the user attempts to interact with the site, the malicious script is executed in the user's browser, giving the attacker access to the victim's interaction with the site, such as login information, etc.

CSP will prevent most script injection attacks from happening because it can be set to restrict JavaScript to be loaded only from trusted locations.

This article introduces some test cases based on frame-src this Directive.
As a container, define the web application of the iframe, listening on port 3000: under the wechat folder

Embed another web page, listening on port 3002, under the Jerrylist folder:

If no csp-related Directives (via meta tags) are declared in the csp html under the Jerrylist folder, the iframe works fine:

Test 1: 3000 applications (ie, web applications embedded in 3002 applications) add frame-src

Source code:

 <html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="frame-src 'self'">
    </head>
    <h1>Parent</h1>
    <iframe src="http://localhost:3002/csp"></iframe>
</html>

Test Results:

Refused to frame ' http://localhost:3002/ ' because it violates the following Content Security Policy directive: "frame-src 'self'".

iframe failed to load:

Test 2

 <html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="frame-src 'http://localhost:3002'">
    </head>
    <h1>Parent</h1>
    <iframe src="http://localhost:3002/csp"></iframe>
</html>

wrong information:

The source list for the Content Security Policy directive 'frame-src' contains an invalid source: '' http://localhost:3002 ''. It will be ignored.
11:25:37.549 localhost/:6 Refused to frame ' http://localhost:3002/ ' because it violates the following Content Security Policy directive: "frame-src 'none'".

iframe failed to load:

If you change it to * , it works again:

The following code also works:

 <html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="frame-src http://localhost:3002/csp">
    </head>
    <h1>Parent</h1>
    <iframe src="http://localhost:3002/csp"></iframe>
</html>

The following code also works:

 <html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="frame-src http://localhost:*/csp">
    </head>
    <h1>Parent</h1>
    <iframe src="http://localhost:3002/csp"></iframe>
</html>