Skip to content

fix(theme): add crossorigin="anonymous" to stylesheet link with integrity #95

Description

@kojiromike

Problem

The theme partial that renders the site <head> is internally inconsistent about Subresource Integrity (SRI) and CORS: the local stylesheet <link> tag has an integrity attribute but no crossorigin attribute, while the third-party <script> tags in the same partial have both integrity and crossorigin="anonymous".

Per the SRI spec, when integrity is present and the request is not in cors mode, the response is opaque and the integrity check fails by definition — even when the bytes match. Today this is latent because PR #93 makes the staging stylesheet same-origin via a baseURL override at deploy time, so SRI works without crossorigin. The bug will resurface for any future scenario that serves the stylesheet cross-origin (CDN, asset host, alternate environment).

Background

  • The symptom of this bug — staging at https://openemr.github.io/website-openemr/ rendering unstyled in Firefox — was diagnosed and worked around in ci(deploy): override baseURL for Pages staging build #93. That PR fixes the symptom by making assets same-origin; it does not fix the theme markup.
  • Chromium-family browsers have historically been more permissive than Firefox here. "Looks fine in Chrome" is not evidence the markup is correct.
  • Lines 14–17 of the same partial load other stylesheets (Google Fonts, Typekit, Cooper Hewitt fonts, Font Awesome) without any integrity attribute, so they are not affected by this issue and should not be changed as part of it.

Files / Symbols

  • themes/openemr/layouts/partials/header.html:20 — the affected <link rel="stylesheet">. Currently:
    <link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}">
    Should be:
    <link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}" crossorigin="anonymous">
  • themes/openemr/layouts/partials/header.html:37–40 — reference for the existing integrity + crossorigin="anonymous" pattern used on <script> tags. Match that style.

Reproduction

To confirm the fix end-to-end, the change must be exercised in a cross-origin configuration. The current GitHub Pages staging build is same-origin (post-PR #93), so it will not exercise the bug. Either:

  1. Build locally with hugo --baseURL https://example.invalid/ and serve the resulting public/ from a different origin than the asset path the stylesheet ends up referencing, then load in Firefox and verify the page is styled and the browser console shows no SRI error; or
  2. Once the change is in, verify against any future cross-origin asset configuration.

Approach

  1. Add crossorigin="anonymous" to the <link rel="stylesheet"> at themes/openemr/layouts/partials/header.html:20.
  2. Verify the same-origin staging deploy still works (regression check) — load https://openemr.github.io/website-openemr/ in Firefox after the change merges and a deploy completes; confirm the page is styled.
  3. No other <link> tags in this partial carry an integrity attribute, so no other lines need changing.

Definition of done

  • themes/openemr/layouts/partials/header.html:20 includes crossorigin="anonymous" alongside integrity.
  • Post-merge: https://openemr.github.io/website-openemr/ still renders with styles applied in Firefox (no regression of the same-origin path).
  • No other <link integrity=...> tags introduced without a matching crossorigin attribute.

Out of scope

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Fields

    No fields configured for Bug.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions