WIP/POC: crossword page in DCR #12511
Draft
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| |{' '} | ||
| {!!crossword.pdf && ( | ||
| <> | ||
| <a target="_blank" href={crossword.pdf} rel="noreferrer"> |
Check failure
Code scanning / CodeQL
Client-side cross-site scripting High
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix AI 25 days ago
To fix the problem, we need to ensure that the crossword.pdf value is properly sanitized before being used in the href attribute. This can be achieved by using a library like DOMPurify to sanitize the URL.
- Import the
DOMPurifylibrary. - Use
DOMPurify.sanitizeto clean thecrossword.pdfvalue before using it in thehrefattribute.
Suggested changeset
1
dotcom-rendering/src/components/CrosswordLinks.tsx
| @@ -3,2 +3,3 @@ | ||
| import { palette } from '../palette'; | ||
| import DOMPurify from 'dompurify'; | ||
|
|
||
| @@ -23,2 +24,3 @@ | ||
| }) => { | ||
| const sanitizedPdf = crossword.pdf ? DOMPurify.sanitize(crossword.pdf) : null; | ||
| return ( | ||
| @@ -33,5 +35,5 @@ | ||
| |{' '} | ||
| {!!crossword.pdf && ( | ||
| {!!sanitizedPdf && ( | ||
| <> | ||
| <a target="_blank" href={crossword.pdf} rel="noreferrer"> | ||
| <a target="_blank" href={sanitizedPdf} rel="noreferrer"> | ||
| PDF version |
Copilot is powered by AI and may make mistakes. Always verify output.
| |{' '} | ||
| {!!crossword.pdf && ( | ||
| <> | ||
| <a target="_blank" href={crossword.pdf} rel="noreferrer"> |
Check warning
Code scanning / CodeQL
Client-side URL redirect Medium
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix AI 25 days ago
To fix the problem, we need to ensure that the URL in crossword.pdf is validated against a list of trusted URLs or domains before it is used in the href attribute. This can be achieved by creating a function that checks if the URL belongs to a trusted domain and only then allows it to be used.
- Create a function to validate the URL.
- Use this function to check
crossword.pdfbefore setting it in thehrefattribute.
Suggested changeset
1
dotcom-rendering/src/components/CrosswordLinks.tsx
| @@ -16,2 +16,12 @@ | ||
|
|
||
| const isValidUrl = (url: string) => { | ||
| try { | ||
| const trustedDomains = ['theguardian.com', 'guim.co.uk']; | ||
| const parsedUrl = new URL(url); | ||
| return trustedDomains.includes(parsedUrl.hostname); | ||
| } catch (e) { | ||
| return false; | ||
| } | ||
| }; | ||
|
|
||
| export const CrosswordLinks = ({ | ||
| @@ -33,3 +43,3 @@ | ||
| |{' '} | ||
| {!!crossword.pdf && ( | ||
| {!!crossword.pdf && isValidUrl(crossword.pdf) && ( | ||
| <> |
Copilot is powered by AI and may make mistakes. Always verify output.
|
Size Change: +101 kB (+10.96%) Total Size: 1.02 MB
ℹ️ View Unchanged
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What does this change?
Add a crossword page and layout into DCR; uses https://github.com/t-blackwell/mycrossword for the crossword player.
Written by a first-time DCR contributor, and at-best novice frontend person trying to find the least-effort way to get the player to render on the frontend; probably needs many many changes to bring into good practice!
Why?
Screenshots