Add frame-ancestors to content security policy directives

Author: mattdell

src/rules/content-security-policy.spec.ts

@@ -254,6 +254,20 @@ describe("convertFetchDirectiveToString", () => {
     });
   });
 
+  context.only('when giving an object which has "frameAncestors" property', () => {
+    it('should return value which includes "frame-ancestors"', () => {
+      expect(convertFetchDirectiveToString({ frameAncestors: "'self'" })).toBe("frame-ancestors 'self'");
+      expect(convertFetchDirectiveToString({ frameAncestors: ["'self'", "https://www.example.com/"] })).toBe(
+        "frame-ancestors 'self' https://www.example.com/",
+      );
+
+      expect(convertFetchDirectiveToString({ "frame-ancestors": "'self'" })).toBe("frame-ancestors 'self'");
+      expect(convertFetchDirectiveToString({ "frame-ancestors": ["'self'", "https://www.example.com/"] })).toBe(
+        "frame-ancestors 'self' https://www.example.com/",
+      );
+    });
+  });
+
   context('when giving an object which has "imgSrc" property', () => {
     it('should return value which includes "img-src"', () => {
       expect(convertFetchDirectiveToString({ imgSrc: "'self'" })).toBe("img-src 'self'");

src/rules/content-security-policy.ts

@@ -28,6 +28,8 @@ type FetchDirective = {
   "default-src": DirectiveSource;
   fontSrc: DirectiveSource;
   "font-src": DirectiveSource;
+  frameAncestors: DirectiveSource;
+  "frame-ancestors": DirectiveSource;
   frameSrc: DirectiveSource;
   "frame-src": DirectiveSource;
   imgSrc: DirectiveSource;
@@ -98,6 +100,8 @@ const fetchDirectiveNamesByKey: Record<keyof FetchDirective, string> = {
   "default-src": "default-src",
   fontSrc: "font-src",
   "font-src": "font-src",
+  frameAncestors: "frame-ancestors",
+  "frame-ancestors": "frame-ancestors",
   frameSrc: "frame-src",
   "frame-src": "frame-src",
   imgSrc: "img-src",