feat: added Cross Site Scripting tests for frame:state (#199)

.changeset/three-doors-know.md

@@ -1,5 +1,6 @@
 ---
-"@coinbase/onchainkit": minor
+'@coinbase/onchainkit': patch
 ---
 
-**feat**: add support for passing `state` to frame server. By @taycaldwell #197
+- **chore**: added Cross Site Scripting tests for `frame:state`. By @zizzamia #199
+- **feat**: added support for passing `state` to frame server. By @taycaldwell #197

CHANGELOG.md

@@ -1,18 +1,11 @@
 # Changelog
 
-
-## 0.10.0
-
-### Minor Changes
-
-- **feat**: add support for passing `state` to frame server. By @taycaldwell #197
-
 ## 0.9.4
 
 ### Patch Changes
 
-- 4c7fe48: - **fix**: in EAS did checksum address before querying GQL endpoint. By @dneilroth #182
-  - **feat**: added support for both ETH and SOL `verified_addresses` for [getFrameMessage](https://onchainkit.xyz/frame/get-frame-message). By @cnasc #181
+- **fix**: in EAS did checksum address before querying GQL endpoint. By @dneilroth #182
+- **feat**: added support for both ETH and SOL `verified_addresses` for [getFrameMessage](https://onchainkit.xyz/frame/get-frame-message). By @cnasc #181 4c7fe48
 
 ## 0.9.3
 

src/frame/components/FrameMetadata.test.tsx

@@ -52,7 +52,7 @@ describe('FrameMetadata', () => {
     expect(meta.container.querySelectorAll('meta').length).toBe(4);
   });
 
-  it('renders with input', () => {
+  it('renders with state', () => {
     const meta = render(
       <FrameMetadata image="https://example.com/image.png" state={{ counter: 1 }} />,
     );
@@ -63,6 +63,20 @@ describe('FrameMetadata', () => {
     expect(meta.container.querySelectorAll('meta').length).toBe(4);
   });
 
+  it('renders with state when Cross Site Scripting occur', () => {
+    const meta = render(
+      <FrameMetadata
+        image="https://example.com/image.png"
+        state={{ counter: 1, xss: '<script>' }}
+      />,
+    );
+    expect(meta.container.querySelector('meta[property="fc:frame:state"]')).not.toBeNull();
+    expect(
+      meta.container.querySelector('meta[property="fc:frame:state"]')?.getAttribute('content'),
+    ).toBe('%7B%22counter%22%3A1%2C%22xss%22%3A%22%3Cscript%3E%22%7D');
+    expect(meta.container.querySelectorAll('meta').length).toBe(4);
+  });
+
   it('renders with two basic buttons', () => {
     const meta = render(
       <FrameMetadata

src/frame/components/FrameMetadata.tsx

@@ -77,7 +77,9 @@ export function FrameMetadata({
       {!!imageSrc && <meta property="fc:frame:image" content={imageSrc} />}
       {!!aspectRatio && <meta property="fc:frame:image:aspect_ratio" content={aspectRatio} />}
       {!!input && <meta property="fc:frame:input:text" content={input.text} />}
-      {!!state && <meta property="fc:frame:state" content={encodeURIComponent(JSON.stringify(state))} />}
+      {!!state && (
+        <meta property="fc:frame:state" content={encodeURIComponent(JSON.stringify(state))} />
+      )}
 
       {!!button1 && <meta property="fc:frame:button:1" content={button1.label} />}
       {!!(button1 && !!button1.action) && (

src/frame/getFrameHtmlResponse.test.ts

@@ -314,6 +314,32 @@ describe('getFrameHtmlResponse', () => {
     );
     expect(html).not.toContain('fc:frame:state');
   });
+
+  it('should handle state when Cross Site Scripting occur', () => {
+    const html = getFrameHtmlResponse({
+      buttons: [{ label: 'button1' }],
+      image: 'https://example.com/image.png',
+      postUrl: 'https://example.com/api/frame',
+      state: {
+        counter: 1,
+        xss: '<script>alert("XSS")</script>',
+      },
+    });
+
+    expect(html).toContain('<meta property="fc:frame" content="vNext" />');
+    expect(html).toContain('<meta property="fc:frame:button:1" content="button1" />');
+    expect(html).toContain(
+      '<meta property="fc:frame:image" content="https://example.com/image.png" />',
+    );
+    expect(html).toContain('<meta property="og:image" content="https://example.com/image.png" />');
+    expect(html).toContain(
+      '<meta property="fc:frame:post_url" content="https://example.com/api/frame" />',
+    );
+    expect(html).toContain(
+      '<meta property="fc:frame:state" content="%7B%22counter%22%3A1%2C%22xss%22%3A%22%3Cscript%3Ealert(%5C%22XSS%5C%22)%3C%2Fscript%3E%22%7D"',
+    );
+    expect(html).not.toContain('<script>alert("XSS")</script>');
+  });
 });
 
 export { getFrameHtmlResponse };

src/frame/getFrameMetadata.test.ts

@@ -208,4 +208,27 @@ describe('getFrameMetadata', () => {
       'fc:frame:state': '%7B%22counter%22%3A1%7D',
     });
   });
+
+  it('should return the correct metadata with state when Cross Site Scripting occur', () => {
+    expect(
+      getFrameMetadata({
+        buttons: [{ label: 'button1' }],
+        image: 'image',
+        postUrl: 'post_url',
+        refreshPeriod: 10,
+        state: {
+          counter: 1,
+          xss: '<script>alert("XSS")</script>',
+        },
+      }),
+    ).toEqual({
+      'fc:frame': 'vNext',
+      'fc:frame:button:1': 'button1',
+      'fc:frame:image': 'image',
+      'fc:frame:post_url': 'post_url',
+      'fc:frame:refresh_period': '10',
+      'fc:frame:state':
+        '%7B%22counter%22%3A1%2C%22xss%22%3A%22%3Cscript%3Ealert(%5C%22XSS%5C%22)%3C%2Fscript%3E%22%7D',
+    });
+  });
 });

src/version.ts

@@ -1 +1 @@
-export const version = '0.9.4';
+export const version = '0.9.5';