CODEWITHSUNDEEP
content-security-policyclickjacking
Krishna Chaitanya
Krishna Chaitanya

Reputation: 2663

Content Security Policy 'frame ancestors' directive not working in <meta> element

As part of clickjacking we are trying to add CSP headers as meta tags to our angular projects. Below is the html

<!doctype html>
<html lang="en">
<head>
  <meta http-equiv="Content-Security-Policy" content="frame-ancestors 'self'">
  <meta charset="utf-8">
  <title>QA Eval Webapp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

However, when we try to load the page as an iframe, it loads. We have tested in google chrome.

To fix this, we have build the angular project, moved the files under dist to a web application, added a filter to add CSP headers to the response for every request. Below is the code

package com.web.beginner;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletResponse;

@WebFilter(urlPatterns="/*", filterName = "cspfilter")
public class CSPFilter implements Filter {

    @Override
    public void destroy() {
        // TODO Auto-generated method stub

    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse httpResponse = (HttpServletResponse) response;
        httpResponse.setHeader("Content-Security-Policy", "frame-ancestors 'self'");
        chain.doFilter(request, response);
    }

    @Override
    public void init(FilterConfig arg0) throws ServletException {
        // TODO Auto-generated method stub

    }

}

This works.

Why is CSP header not working when added in the meta tag? I even checked https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy and they mention adding CSP in the meta tag.

I know that X-FRAME-OPTIONS do not support html meta tags. Is it the same with Content-Security-Policy as well? Or is chrome ignoring CSP in meta tag?

Upvotes: 7

Views: 18250

Answers (1)

sideshowbarker
sideshowbarker

Reputation: 87984

The specs require browsers to ignore frame-ancestors if specified in a meta-element policy.

So to apply a frame-ancestors policy, you must use the Content-Security-Policy header.

Spec citations

See https://w3c.github.io/webappsec-csp/#meta-element in the CSP spec, and specifically this:

Note: The Content-Security-Policy-Report-Only header is not supported inside a meta element. Neither are the report-uri, frame-ancestors, and sandbox directives.

https://html.spec.whatwg.org/multipage/semantics.html#attr-meta-http-equiv-content-security-policy, step 4 of the Content security policy state (http-equiv="content-security-policy") algorithm (“This pragma enforces a Content Security Policy on a Document”) in the HTML spec, requires this:

Remove all occurrences of the report-uri, frame-ancestors, and sandbox directives

Upvotes: 10

Related Questions