Skip to content

Commit

Permalink
Site tweaks to improve strict CSP hosting (#2492)
Browse files Browse the repository at this point in the history
# Pull Request

## 🤨 Rationale

The reason for this PR was trying to evaluate Nimble-based apps hosting
in Web App hosting under our strict CSP policy. This was done by
exercising the nimble site build which covers the following: Angular,
Blazor, Vite, Storybook.

In doing so identified some changes that are either useful or minimally
invasive as workarounds for WebApp hosting issues or improving the
experience of Nimble site if hosted in Web App hosting.

## 👩‍💻 Implementation

Vite: 
- A minimal change to provide a [relative base configuration for
vite](https://vite.dev/guide/build#relative-base) was needed. This
causes vite to change from paths relative to root (`/script.js`) to
relative paths in the current directory (`./script.js`). Reason is
WebApps are not hosted in root but from a subdirectory path.

Angular:
- A minimal change to [disable inlineCritical
styles](https://0xdbe.github.io/AngularSecurity-DisableInlineCriticalCSS/)
is needed so that stylesheets included in angular.json load correctly
(which seems to be [something we figured
out](https://dev.azure.com/ni/DevCentral/_search?text=inlineCritical&type=code&pageSize=25&filters=ProjectFilters%7BDevCentral%7D&action=contents)
and inherited in all apps but doesn't seem to be documented anywhere 🤷
it's like a herd immunity inherited in copy-paste generations 💉). Reason
is described in blog / we don't allow unsafe-inline.

Blazor: 
- During investigation found that Blazor does not like to serve from
index.html urls and relies on path urls. You can actually see it on the
[current published site if you use a blazor
index.html](https://nimble.ni.dev/storybook/blazor-client-app/wwwroot/index.html)
style url instead of a directory url. The page fails to load and has
many console errors as Blazor does poor URL parsing / manipulation to
load JS resources. It's probably worth creating an issue but I did not
yet.
- I thought of a workaround for nimble site by specifying a base url
manually of `<base href="./" />`. This is not compatible with our strict
CSP setting and is ignored due to `base-uri: 'none';''` ([the OWASP
strict policy
example](https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html#strict-policy))
causing the errors to continue. We potentially could switch our CSP to
`base-uri: 'self'` but it's not clear to me what the security
implications are and I'm not recommending it yet (see following).
- I also found that Blazor seems generally against the idea of serving
off index.html vs the directory path as [index.html resolution is not
supported out of the box in the
Router](dotnet/aspnetcore#16127 (comment))
either.
- I thought of a Router workaround for index.html resolution by serving
the same component from both the path url and the index.html url. It
seems to work but I'm not aware of any other concerns relying on that
workaround.
- Even with the above a Blazor 8 app using Nimble will still not run as
some Blazor 8 template binding features require using eval and are only
[addressed in Blazor
9](dotnet/aspnetcore#58322 (comment)).
- Based on the above, while I'll propose the changes for Nimble's Blazor
site page to support `index.html` based urls working, I'm not going to
propose changes to Web App hosting strict CSP base-uri configuration to
support the workaround described above. Instead, I think we should say
Nimble Blazor WebApp hosting is contingent on Blazor 9 support in Nimble
and [fixing path serving in Web App
hosting.](https://dev.azure.com/ni/DevCentral/_workitems/edit/2941644/)
I don't think we should recommend the workarounds I figured out above to
Blazor WebApp devs as from the linked issues Blazor does not seem
interested in supporting that pattern.

Storybook:
- Depends on unsafe-inline (which we do not allow) and [they seem
resistant to the
change](storybookjs/storybook#24381 (comment)).
Need to reply on the issue with a convincing discussion, not sure if
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#unsafe_inline_script)
and OWASP recommendations are sufficient for them. Did not provide a
comment / create an issue.

All:
- Updated links to point to `index.html` paths as it's minimally
invasive (makes the URL bar uglier) but works around [ AzDo
2941644](https://dev.azure.com/ni/DevCentral/_workitems/edit/2941644).
This could be reverted in Nimble once the WebApp directory hosting issue
is address.
- Updated each page to have a link to the parent page to make them
easier to navigate between when hosted in the WebApp hosting iframe.

## 🧪 Testing

Manual and via built storybook.
Also example hosted on dev:
-
[Landing](https://dev.lifecyclesolutions.ni.com/niapp/v1/webapps/037e47d5-d0fa-44d7-947f-07c0a42a2c16/content/NIPkgMgrTempUnique/dist/index.html)
(vite)
- [Wafer
Performance](https://dev.lifecyclesolutions.ni.com/niapp/v1/webapps/037e47d5-d0fa-44d7-947f-07c0a42a2c16/content/NIPkgMgrTempUnique/dist/storybook/performance/wafer-map/index.html)
(vite)
-
[Angular](https://dev.lifecyclesolutions.ni.com/niapp/v1/webapps/037e47d5-d0fa-44d7-947f-07c0a42a2c16/content/NIPkgMgrTempUnique/dist/storybook/example-client-app/index.html#/customapp)
-
[Blazor](https://dev.lifecyclesolutions.ni.com/niapp/v1/webapps/037e47d5-d0fa-44d7-947f-07c0a42a2c16/content/NIPkgMgrTempUnique/dist/storybook/blazor-client-app/wwwroot/index.html)
broken, see above
- Storybook expected to be broken, see above (can't explicitly test as
deleted from dev package due to [size upload
bug](https://dev.azure.com/ni/DevCentral/_workitems/edit/2941425#9573937))

## ✅ Checklist

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.
  • Loading branch information
rajsite authored Dec 11, 2024
1 parent 8c0f186 commit 304384c
Show file tree
Hide file tree
Showing 10 changed files with 31 additions and 12 deletions.
6 changes: 5 additions & 1 deletion packages/angular-workspace/angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,11 @@
}
],
"buildOptimizer": true,
"optimization": true,
"optimization": {
"styles": {
"inlineCritical": false
}
},
"sourceMap": true
},
"development": {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
<div class="content container">
<p>Explore the components below to see the Nimble components in action. See the <a
href="https://ni.github.io/nimble/storybook/">Nimble
component docs</a> for additional usage details.</p>
<p>
Explore the components below to see the Nimble components in action. See the <a
href="https://ni.github.io/nimble/storybook/">Nimble
component docs</a> for additional usage details.
Navigate to the <a href="../index.html">parent page</a>.
</p>
<div class="container">
<div class="sub-container">
<div class="container-label">Anchor</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Blazor All Components Demo - Nimble Design System - NI</title>
<meta name="description" content="Blazor demo showing all nimble components">
<base href="./" />
<link href="css/site.css" rel="stylesheet" />
<link href="Demo.Client.styles.css" rel="stylesheet" />
<link href="_content/NimbleBlazor/nimble-tokens/css/fonts.css" rel="stylesheet" />
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@page "/"
@page "/index.html"
@namespace Demo.Shared.Pages
@inherits LayoutComponentBase

Expand All @@ -7,6 +8,7 @@
Explore the components below to see the Nimble components in action. See the <a
href="https://nimble.ni.dev/storybook/">Nimble
component docs</a> for additional usage details.
Navigate to the <a href="../../index.html">parent page</a>.
</p>
<div class="container">
<div class="sub-container">
Expand Down
1 change: 1 addition & 0 deletions packages/performance/src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,6 @@ <h1>Performance tests</h1>
<ul>
<li><a href="./wafer-map/index.html">Wafer Map</a></li>
</ul>
Navigate to the <a href="../index.html">parent page</a>.
</body>
</html>
1 change: 1 addition & 0 deletions packages/performance/src/wafer-map/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
<script type="module" src="./index.ts"></script>
</head>
<body>
<p>Navigate to the <a href="../index.html">parent page</a>.</p>
<p>See devtools performance timing for results.</p>
<p>Loading...</p>
<p class="running" hidden>Running...</p>
Expand Down
6 changes: 3 additions & 3 deletions packages/site/landing/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
</div>
<div class="cards">
<div class="card-wrapper">
<a class="card" href="storybook/">
<a class="card" href="storybook/index.html">
<div class="icon"><img src="./images/sb.svg" width="64" height="64" alt="Storybook Logo"></div>
<div class="name">Storybook</div>
<div class="description">Browse documentation</div>
Expand All @@ -46,14 +46,14 @@
</a>
</div>
<div class="card-wrapper">
<a class="card" href="storybook/example-client-app">
<a class="card" href="storybook/example-client-app/index.html">
<div class="icon"><img src="./images/ng.svg" width="64" height="64" alt="Angular Logo"></div>
<div class="name">Angular Demo</div>
<div class="description">View the Angular demo application</div>
</a>
</div>
<div class="card-wrapper">
<a class="card" href="storybook/blazor-client-app/wwwroot/">
<a class="card" href="storybook/blazor-client-app/wwwroot/index.html">
<div class="icon"><img src="./images/blazor.svg" width="187" height="64" alt="Blazor Logo">
</div>
<div class="name">Blazor Demo</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/site/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"scripts": {
"build": "npm run build:landing && npm run build:eleventy",
"build:eleventy": "eleventy",
"build:landing": "tsc && vite build landing",
"build:landing": "tsc && vite --config ./vite.config.js build landing",
"pack": "npm pack",
"lint": "eslint .",
"start:eleventy": "eleventy --serve",
Expand Down
7 changes: 7 additions & 0 deletions packages/site/vite.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
// eslint-disable-next-line import/no-extraneous-dependencies
import { defineConfig } from 'vite';

// eslint-disable-next-line import/no-default-export
export default defineConfig({
base: './'
});
8 changes: 4 additions & 4 deletions packages/storybook/src/docs/nimble-intro.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@ documentation on using or contributing to the component libraries. To add or
update component design documentation, refer to the
[documentation guide](https://github.com/ni/nimble/tree/main/packages/storybook/CONTRIBUTING.md).

See the <a href="./example-client-app" target="_blank">example Angular app</a>
or <a href="./blazor-client-app/wwwroot" target="_blank">example Blazor app</a>
using the components!
{/* prettier-ignore */}
<p>See the <a href="./example-client-app/index.html" target="_parent">example Angular app</a> or <a href="./blazor-client-app/wwwroot/index.html" target="_parent">example Blazor app</a> using the components!</p>

See the <a href="./performance" target="_blank">component performance tests</a>.
{/* prettier-ignore */}
<p>See the <a href="./performance/index.html" target="_parent">component performance tests</a>. Navigate to the <a href="../index.html" target="_parent">parent page</a>.</p>

## How to use this site?

Expand Down

0 comments on commit 304384c

Please sign in to comment.