Refactor code in current-projects.js to avoid Liquid injection vulnerability

[tamara-snyder]

Overview

As a developer, I want to keep the sites I work on secure by escaping Liquid injection vulnerabilities so that site remains secure.

Action Items

• Read this audit of the HfLA website's Liquid injection vulnerabilities for a better understanding of the current state of the site's security. The purpose of this issue is to take extra precautions when loading some internal JSON data to prevent scripting problems/attacks from within the organization, like when code is edited.
• In assets/js/current-projects.js:
  • Find the line of Liquid that creates visible_projects on line 63.
  • Escape the visible_projects object using JSON.parse(decodeURIComponent()) and assign it to a variable. You can use lines 62 and 64 (the projects object) as a reference
  • Make sure that the object is being called correctly in lines 101, 104, 107, and 110. These lines will probably need to change to something like in lines 69-78 for the projects object
• Check that there are no errors and that the Projects page loads as expected
• Use the code from pages 3 and 4 of the audit of the HfLA website's Liquid injection vulnerabilities to test that HTML insertion in a .md file will not affect the website
• Create a pull request for this issue. There should be no visible changes to the site

Resources/Instructions

Hack for LA Liquid Injection Vulnerabilities Audit
Code file to be edited: assets/js/current-projects.js
Liquid guide

[JessicaLucindaCheng]

@tamara-snyder I took a quick look at the issue you wrote since you requested it and it looks like nobody has reviewed this issue yet. First, good job with what you have written so far.

• In the Overview, I added a "so that" part to what you wrote. I wasn't sure what to write for that, so feel free to change it.
• In the 2nd action item, in the 2nd sub-action item, where you wrote JSON.parse(decodeURIComponent(), is it supposed to have another parenthesis?
• I did some minor formatting and removed the Dependency section since there are no dependencies.
• I hid the GHA bot comment to you. Bonnie prefers we hide comments that the assigned developer working on this issue does not need to read so that the assigned developer is not bogged down by a whole bunch of comments that are not relevant to the work they need to do on the issue. (So feel free to hide this comment once you read it.)
• I added "P-Feature: Projects page" label because I think the refactoring deals with the js that is part of the Projects page. Feel free to remove that label or change it to the correct P-Feature label if I am wrong.

[github-actions]

Hi @BeckettOBrien, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:-
i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?)
ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[BeckettOBrien]

Availability for this week: 10 AM to 4 PM weekdays
My estimated ETA for completing this issue: 1-2 Hours

[JessicaLucindaCheng]

@BeckettOBrien When you self-assign an issue (besides your prework checklist), please move it to the "In Progress" column.

[BeckettOBrien]

Sorry, done!

[BeckettOBrien]

Reopening because the PR to fix this broke the program areas and languages for project cards. I think I know how to fix it so I should be able to have another PR by EOD 7/5/22 (or EOD on whatever day the old PR gets reverted)

[BeckettOBrien]

@tamara-snyder I noticed that some of the projects use HTML in their descriptions, which would no longer work after escaping liquid injections. For example, this is what the Undebate project card would look like after this issue is resolved:

[BeckettOBrien]

Bonnie asked me to add some details about why this was closed to the issue itself:
Quote from Wilny about why it was being closed:

We talked about the HTML tags being used across projects last night during the dev lead meeting and what I understand was that we were going to close the issue itself entirely because preventing Liquid injection would screw up too many of the descriptions to be worth doing.

List of projects that would be affected:

• Civic Tech Jobs
• Civic Tech Structure
• Design Systems
• Expunge Assist
• Home Unite Us
• Open Community Survey
• Undebate

[ExperimentsInHonesty]

Why and where is html used

To create separate paragraphs

• Civic Tech Jobs
  • The CivicTechJobs.org MVP website will be a platform to help prospective volunteers find inter disciplinary projects that will be useful for their career development while contributing to positive civic impact and a CMS for Hack for LA projects to be able to list their open roles.<br><br>The tool will match volunteers by availability, role, and program area. Future iterations of the platform will focus helping volunteers find volunteer opportunities that match paid job postings, so that a volunteer can better prepare themselves for the marketplace.
• Civic Tech Structure
  • "The Civic Tech Structure project seeks to improve existing structures and create new ones that make it easier to share replicable processes and practices so that the civic tech community can iterate on each other’s work, improving outcomes for the whole ecosystem.<br><br>Our Civic Tech Structure project is responsible for publishing all of our guides and other reference materials that we hope will help other people and organizations to stand on the shoulders of those who contributed before them."
• Design Systems
  • 'The Design System initiative seeks to empower volunteers with the tools, documentation and templates for creating and maintaining a design system for their HfLA projects. As Hack for LA continues to scale it has become more essential to create consistent documentation and standards for design deliverables. <br /><br /> A Design System is a single source of truth for a website’s designers and developers– a collection of reusable components, styles, and code guided by clear standards and documentation. Design systems are now an industry standard used by the website teams of most major companies.'
• Expunge Assist
  • 'Expunge Assist aims to help people in California with criminal records accomplish record clearance, expungement or reduction and subsequently a second chance as a part of society.<br /><br />We work with verifiable non-profits, the government and partners to build digital tools that can affect changes in the lives of these justice impacted individuals.'
• Home Unite Us
  • The Home Unite Us project is developing a workflow management tool for community nonprofits to automate and scale their existing Host Home initiatives, prioritizing streamlining of caseworkers' repetitive workloads, reducing institutional bias, and effectively capturing crucial data. <br /><br />Host Home programs are centered around housing young people, 18 - 25 years old. Their approach focuses on low-cost, community-driven intervention by matching a willing host with a guest or group of guests, providing a stable housing environment for youths who are experiencing homelessness and seeking stable housing.
• Undebate
  • For down ballot offices like school-board, voters often don’t know the candidates, so they skip it. With declining media attention, candidates for these offices have a hard time being heard by voters. But electing good people is important!<br /><br /> Undebates are automated online video Q&A so candidates can be heard, and voters can quickly decide - for every candidate, for every election, across the US.

to use a colon (which is a protected character used to define fields)

• Open Community Survey
  • The Open Community Survey project creates transparent reports supported by a direct collection of personal perspectives from LA residents to help The LA Department of Neighborhood Empowerment (empowerla.org) and the Los Angeles Neighborhood Councils (NCs) to understand how constituents are interacting with, and what they need from, their websites.<br /><br /> Current project&#58 NC website survey; Most NCs do not have access or resources to hire technical experts necessary to create a citywide survey so that they can use the data to create inclusive websites targeted towards the needs of their specific communities. Working with EmpowerLA and NCs, Hack for LA is providing the workforce and expertise to design and implement this survey that will give NCs a tool to understand the overall needs of their community -- beyond the people already involved in NCs.

[ExperimentsInHonesty]

I have detailed where HTML is used in the above referenced files #3257 (comment)

Let's talk about other solutions at Sunday's team meeting

[ExperimentsInHonesty]

We should try some other solutions or paragraphs, such as

solution 1

item: |
  Using a pipe character, and then dropping down a line
  and indenting like this allows you to include multiple
  paragraphs, just as you would in Markdown.

  Another paragraph

solution 2

  key: "Antidisestab\
   lishmentarianism."

More solutions here: https://stackoverflow.com/questions/3790454/how-do-i-break-a-string-in-yaml-over-multiple-lines

[ExperimentsInHonesty]

@BeckettOBrien can you take a look at the solutions provided above and test them out in your local environment to see which might work for us.

I believe the issue is we were taking a shortcut, using html in the markdown/yml project files and there are already solutions for this that are suitable for these file types.

If we are able to use one of these solutions, we might be able to use the security fix.

The one that we can't fix is when the project file uses a colon, and we can replace it with a dash instead.

[BeckettOBrien]

I couldn't get any of these solutions to actually produce a line break in the rendered site. I found that the liquid filter newline_to_br can be used to generate HTML line breaks, but those would be escaped and rendered as raw text on the site. Another possibility would be to modify the sanitization code to either only escape blacklisted tags (scripts, iframes, etc) or not escape whitelisted ones (line breaks and possibly other formatting tags if necessary).

[BeckettOBrien]

Putting a link to the decision record for this issue here before its closed:
https://github.com/hackforla/website/wiki/DR:-Sanitize-project-markdown-to-prevent-Liquid-Injection-attacks