Draft --- E2E - Add csp tests

cypress/e2e/selectors/selectors.cy.ts

@@ -1,7 +1,7 @@
 export const TokenCatalogLocators = {
   dropdownTokenIn: '[data-testid=swap-currency-input] [data-testid=token-symbol-container]',
   dropdownTokenOut: '[data-testid=swap-currency-output] [data-testid=token-symbol-container]',
-  txtToken: '[data-testid=token-search-input]',
+  txtSearch: '[data-testid=search-input]',
   lblFavoriteToken: '[data-testid=favorite-token]',
   lblRowInWhiteList: '[data-testid=token-item]',
   lblNotFound: '[data-testid=no-token-result]',
@@ -43,4 +43,17 @@ export const HeaderLocators = {
 export const FarmLocators = {
   lblApr: '[data-testid=apr-value]',
   lblTvl: '[data-testid=tvl-value]',
+  txtSearch: '[data-testid=input-search]'
+}
+
+export const PoolLocators = {
+  txtSearch: '[data-testid=search-input]'
+}
+
+export const MyPoolLocators = {
+  txtSearch: '[data-testid=search-input]'
+}
+
+export const MyEarningLocators = {
+  txtSearch: '[data-testid=search-input]'
 }

cypress/e2e/specs/csp.e2e.cy.ts

@@ -0,0 +1,128 @@
+import { SwapPage, TokenCatalog } from "../pages/swap-page.po.cy"
+import { DEFAULT_URL, TAG } from "../selectors/constants.cy"
+import { FarmLocators, MyPoolLocators, PoolLocators } from "../selectors/selectors.cy"
+
+const tokenCatalog = new TokenCatalog()
+
+describe('CSP', { tags: TAG.regression }, () => {
+    beforeEach(() => {
+        cy.on('window:load', (win) => cy.stub(win.console, 'log').as('log'))
+        SwapPage.open(DEFAULT_URL)
+    })
+
+    describe('Search token in Token Catalog', () => {
+        beforeEach(() => {
+            SwapPage.selectTokenIn()
+        })
+
+        it('injecting <script> tag does not work', () => {
+            tokenCatalog.searchToken('KNC<script>console.log(`failed`)</script>')
+            cy.get('@log').should('not.have.been.called')
+        })
+
+        it('injects XSS via img onerror attribute', () => {
+            tokenCatalog.searchToken('KNC<img src="" onerror="console.log(`failed`)" />')
+            cy.get('@log').should('not.have.been.called')
+        })
+
+        it('serves Content-Security-Policy header', () => {
+            cy.request('/')
+                .its('headers')
+                .should('have.property', 'content-security-policy')
+                // confirm parts of the CSP directive
+                .should('include', "frame-ancestors 'self'")
+        })
+    })
+
+    describe('Search token in Pools Page', () => {
+        beforeEach(() => {
+            SwapPage.goToPoolPage()
+        })
+        it('injecting <script> tag does not work', () => {
+            cy.get(PoolLocators.txtSearch, { timeout: 10000 })
+                .should('be.visible')
+                .click()
+                .type('KNC<script>console.log(`failed`)</script>')
+            cy.get('@log').should('not.have.been.called')
+        })
+
+        it('injects XSS via img onerror attribute', () => {
+            cy.get(PoolLocators.txtSearch, { timeout: 10000 })
+                .should('be.visible')
+                .click()
+                .type('KNC<img src="" onerror="console.log(`failed`)" />')
+            cy.get('@log').should('not.have.been.called')
+        })
+
+        it('serves Content-Security-Policy header', () => {
+            cy.request('/')
+                .its('headers')
+                .should('have.property', 'content-security-policy')
+                // confirm parts of the CSP directive
+                .should('include', "frame-ancestors 'self'")
+        })
+    })
+
+    describe('Search token in My Pools Page', () => {
+        beforeEach(() => {
+            SwapPage.goToMyPoolsPage()
+        })
+
+        it('injecting <script> tag does not work', () => {
+            cy.get(MyPoolLocators.txtSearch, { timeout: 10000 })
+                .should('be.visible')
+                .click()
+                .type('KNC<script>console.log(`failed`)</script>')
+            cy.get('@log').should('not.have.been.called')
+        })
+
+        it('injects XSS via img onerror attribute', () => {
+            cy.get(MyPoolLocators.txtSearch, { timeout: 10000 })
+                .should('be.visible')
+                .click()
+                .type('KNC<img src="" onerror="console.log(`failed`)" />')
+            cy.get('@log').should('not.have.been.called')
+        })
+
+        it('serves Content-Security-Policy header', () => {
+            cy.request('/')
+                .its('headers')
+                .should('have.property', 'content-security-policy')
+                // confirm parts of the CSP directive
+                .should('include', "frame-ancestors 'self'")
+        })
+
+    })
+
+    describe('Search token in Farms Page', () => {
+        beforeEach(() => {
+            SwapPage.goToFarmPage()
+        })
+
+        it('injecting <script> tag does not work', () => {
+            cy.get(FarmLocators.txtSearch, { timeout: 10000 })
+                .should('be.visible')
+                .click()
+                .type('KNC<script>console.log(`failed`)</script>')
+            cy.get('@log').should('not.have.been.called')
+        })
+
+        it('injects XSS via img onerror attribute', () => {
+            cy.get(FarmLocators.txtSearch, { timeout: 10000 })
+                .should('be.visible')
+                .click()
+                .type('KNC<img src="" onerror="console.log(`failed`)" />')
+            cy.get('@log').should('not.have.been.called')
+        })
+
+        it('serves Content-Security-Policy header', () => {
+            cy.request('/')
+                .its('headers')
+                .should('have.property', 'content-security-policy')
+                // confirm parts of the CSP directive
+                .should('include', "frame-ancestors 'self'")
+        })
+
+    })
+
+})

cypress/e2e/specs/intercept.e2e.cy.ts

@@ -21,11 +21,9 @@ describe('Intercept', { tags: TAG.regression }, () => {
       it('Should get pool, farm list successfully', () => {
          cy.intercept('GET', '**/farm-pools?**').as('get-farm-list')
          cy.intercept('GET', '**/pools?**').as('get-pool-list')
-         cy.intercept('GET', '**/block?**').as('get-block')
          SwapPage.goToPoolPage()
          cy.wait('@get-farm-list', { timeout: 5000 }).its('response.statusCode').should('equal', 200)
          cy.wait('@get-pool-list', { timeout: 5000 }).its('response.statusCode').should('equal', 200)
-         cy.wait('@get-block', { timeout: 60000 }).its('response.statusCode').should('equal', 200)
       })
 
       it('Should be displayed APR and TVL values', () => {
@@ -56,7 +54,6 @@ describe('Intercept', { tags: TAG.regression }, () => {
       it('Should get pool, farm list successfully', () => {
          cy.intercept('GET', '**/farm-pools?**').as('get-farm-list')
          cy.intercept('GET', '**/pools?**').as('get-pool-list')
-         cy.intercept('GET', '**/block?**').as('get-block')
          SwapPage.goToFarmPage()
          cy.get('[data-testid=farm-block]')
             .should(_ => {})
@@ -65,7 +62,6 @@ describe('Intercept', { tags: TAG.regression }, () => {
                   cy.wait('@get-pool-list', { timeout: 5000 }).its('response.statusCode').should('equal', 200)
                }
                cy.wait('@get-farm-list', { timeout: 5000 }).its('response.statusCode').should('equal', 200)
-               cy.wait('@get-block', { timeout: 60000 }).its('response.statusCode').should('equal', 200)
             })
       })
    })

cypress/support/selectTokenCommands.ts

@@ -39,7 +39,7 @@ Cypress.Commands.add('selectTokenOut', () => {
 })
 
 Cypress.Commands.add('searchToken', (value) => {
-   cy.get(TokenCatalogLocators.txtToken).should('be.visible').type(value)
+   cy.get(TokenCatalogLocators.txtSearch).should('be.visible').type(value)
 })
 
 Cypress.Commands.add('selectTokenBySymbol', (value) => {
@@ -74,7 +74,7 @@ Cypress.Commands.add('deleteImportedToken', (value: string) => {
    cy.searchToken(value)
    cy.wait(1000)
    cy.get(TokenCatalogLocators.lblRowInWhiteList).children().find(TokenCatalogLocators.iconRemoveImportedToken).click()
-   cy.get(TokenCatalogLocators.txtToken).clear()
+   cy.get(TokenCatalogLocators.txtSearch).clear()
 
 })
 

src/components/Search/index.tsx

@@ -73,6 +73,7 @@ const Search = ({ searchValue, onSearch, placeholder, minWidth, style }: SearchP
           onChange={e => {
             onSearch(e.target.value)
           }}
+          data-testid="input-search"
         />
         {searchValue && (
           <ButtonEmpty onClick={() => onSearch('')} style={{ padding: '2px 4px', width: 'max-content' }}>

src/components/SearchModal/CurrencySearch.tsx

@@ -438,7 +438,7 @@ export function CurrencySearch({
           <SearchInput
             type="text"
             id="token-search-input"
-            data-testid="token-search-input"
+            data-testid="search-input"
             placeholder={t`Search by token name, token symbol or address`}
             value={searchQuery}
             ref={inputRef}

src/pages/Farm/index.tsx

@@ -439,6 +439,7 @@ const Farm = () => {
                       maxLength={255}
                       value={search}
                       onChange={e => handleSearch(e.target.value)}
+                      data-testid="input-search"
                     />
                     <Search color={theme.subText} size={16} />
                   </SearchContainer>