Update codeql.yml to exclude YAML front-matter and Liquid code

[gaylem]

Overview

Many of our Javascript and HTML code files cannot be scanned by CodeQL as-is because they contain non-JS Liquid code {% ... %} or YAML front matter --- ... ---, which cause syntax errors. We need to try and resolve these errors without removing all non-JS code.

Details

The error message "Could not process some files due to syntax errors" indicates that these "syntax errors" may prevent CodeQL from scanning the files below (see issue #5234 for details).

• hamburger-nav.js: YAML front-matter with a title
• toolkit.js: 1 line of Liquid, empty YAML front-matter
• wins.js : 2 lines (Liquid), empty YAML front-matter
• project.js : 2 lines (Liquid), empty YAML front-matter
• about.js: for loop (Liquid), empty YAML front-matter
• current-project.js: 2 lines + for loop (Liquid), empty YAML front-matter
• Separately, we have observed problems with CodeQL scanning of HTML with embedded liquid statements - see ER: CodeQL did not raise alerts on each instance of "Potentially unsafe external link" #6485

Screenshot: CodeQL error message

Simply deleting the Liquid lines would break the site (and CodeQL raised those errors accordingly in testing), so an alternative, holistic solution is required.

Action Items

• Review the Possible Solutions content under Resources
• Implement a solution that will exclude YAML front-matter and Liquid code from CodeQL scans on .js and .html files.
• Thoroughly test your changes and ensure the codeql.yml file runs as expected. If it does not run as expected, detail your testing in a comment.

Testing

• Test your solution by running the .codeql-scan-job.yml workflow.
• You'll have to figure out a way to confirm that CodeQL was able to scan the files listed above without scanning the YAML front-matter or Liquid code and without throwing the error.

Resources/Instructions

• This issue resulted from Epic: Enable code scanning on JS files #6378
• Hack for LA's GitHub Actions Wiki
• Resolve CodeQL extraction errors #5234 (comment)

Possible Solutions

Here are two possible solutions (in order of preference) to this problem. Please use your best judgment, these are only recommendations.

Option 1

This approach is preferred because it is

• more generic and reusable
• compatible with using a CodeQL for VS Code extension (See Setting up CodeQL in Visual Studio)

Define a new CodeQL query file that excludes Liquid and YAML patterns within JavaScript files.

Create a file named exclude-patterns.ql

import javascript

from File file
where (file.getExtension() = "js" or file.getExtension() = "html")
  and not file.getCode().matches(".*\\{%.*%\\}.*") // Exclude Liquid code
  and not file.getCode().matches(".*---.*")        // Exclude YAML front matter
select file

Then modify codeql-scan-job.yml file to use the new query file for analysis. Update the queries section in the Initialize CodeQL step to include the new query file:

# On codeql-scan-job.yml file:

- name: Initialize CodeQL
     uses: github/codeql-action/init@v3
     with:
       languages: ${{ matrix.language }}
       queries: path/to/exclude-patterns.ql, security-and-quality

Option 2

Exclude liquid code and YAML front matter patterns from the CodeQL analysis within `codeql-scan-job.yml`

    # On codeql-scan-job.yml file:
    
        - name: Perform CodeQL Analysis
          uses: github/codeql-action/analyze@v3
          with:
            languages: javascript
            queries: security-and-quality
            # Exclude Liquid and YAML code within JavaScript files
            exclude: |
              path: "**/*.{js,html}"
              patterns:
                - pattern: |
                    // Start of Liquid code
                    {% if variable %}
                    // Liquid code here
                    {% endif %}
                    // End of Liquid code
                - pattern: |
                    // Start of YAML front matter
                    ---
                    # YAML front matter here
                    ---
                    // End of YAML front matter

[duojet2ez]

1. Progress: Did some research to understand site architecture (jekyll and how liquid works). Read about codeQL.
2. Blockers: Last week I didn't have the time I was hoping to work on this so didn't do much
3. Availability: 5 - 8 hours this week
4. ETA: Not sure because in order to solve this I need to understand codeQL and docker and the build process.. kind of complex and will take time. But I enjoy learning this stuff on a deeper level

[duojet2ez]

I'll be at the meeting tomorrow to discuss this issue. I would like to edit the codeql-scan-job.yml file and test but not entirely sure how to do this

[duojet2ez]

Progress: This week I was able to successfully reproduce the issue with my fork by starting a codeql scan. I have something to test against. I am considering modifying the codeql.yml file or codeql-scan-job.yml and then running a test again to see if that solves the issue. I also started watching a docker youtube tutorial

Blockers: I don't know enough about containers, specifically docker. To remedy this I am going through a docker youtube tutorial. I am hoping at the end of this I'll have some answers.

Availability: roughly 5 hours a week

Eta: no idea there's a lot to learn

[duojet2ez]

Progress: Not making a lot of progress with this. Didn't have much time this week to do anything!

Blockers: I don't know enough about containers, specifically docker. To remedy this I am going through a docker youtube tutorial. I am hoping at the end of this I'll have some answers.

Availability: roughly 5 hours a week

Eta: no idea there's a lot to learn

[LRenDO]

Hi @duojet2ez ! Thanks for working on this issue. If you're still working, please add an update. If you need some help, please consider leaving more detailed information about your blocker and placing it in the Questions/In Review column of the project board or attend meeting/message the #hfla-site Slack channel and ask for help. If you're not able to continue to working on it, leave us a comment to let us know. If we don't hear from you soon, we will remove you from the issue. Thanks!

[duojet2ez]

Hello! Yes, sorry I have been away and just getting back into things. Haven't been able to look at this issue past few weeks but starting today I will have time. I'll be at meeting this Sunday Nov 10. I have about 4 hours a week to devote to this. It might not be a bad idea to get someone else working on this as well..

[LRenDO]

Hello! Yes, sorry I have been away and just getting back into things. Haven't been able to look at this issue past few weeks but starting today I will have time. I'll be at meeting this Sunday Nov 10. I have about 4 hours a week to devote to this. It might not be a bad idea to get someone else working on this as well..

It's all good if you're moving slowly as this doesn't appear to be time sensitive, but if haven't been able to get the help you need from the team and you're still feeling stuck, let us know. It is a possibility to put this back in the backlog and have you choose another issue. Moving slowly is totally okay though, do just keep us updated weekly so we know you're still working on it.

[duojet2ez]

I am reviewing my notes on this issue today (nov 16) and getting back to it -- specifically researching containers in docker. I will make this a priority next few weeks.. if I cannot progress any further by end of Nov will reach out for help.

[duojet2ez]

Progress: I am creating a basic website/page using jekyll along with liquid and front matter syntax. Then attempting to scan with codeql to recreate this error... I am trying to better understand how jekyll/liquid/front matter interact

Blockers: None right now

Availability: 5 hours this week

ETA: I'll be done with this sub problem Dec 9.. once I solve this locally with a small example hopefully I will be able to extrapolate to the website

[HackforLABot]

@duojet2ez

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Monday, December 30, 2024 at 11:04 PM PST.}