Skip to content

fix(icon): icons will load when content security policies are enabled #1141

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Nov 8, 2022
Merged

fix(icon): icons will load when content security policies are enabled #1141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
da0aaca
test: csp template
sean-perkins Oct 31, 2022
b7448f6
fix: icons with data uris work with CSP
sean-perkins Oct 31, 2022
abd9d26
test(icon): icon loads with csp enabled
sean-perkins Oct 31, 2022
c131542
chore(): rename test.spec to test
liamdebeasi Nov 3, 2022
265ef73
6.1.0-0
liamdebeasi Nov 3, 2022
a2b1836
chore: test command runs test.spec
sean-perkins Nov 3, 2022
6b6591f
Merge branch 'main' into fix/icon-csp
liamdebeasi Nov 8, 2022
1c1a122
chore: revert version bump
sean-perkins Nov 8, 2022
bcad9c9
Merge remote-tracking branch 'origin/fix/icon-csp' into fix/icon-csp
sean-perkins Nov 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"build.component": "stencil build",
"collection.copy": "node scripts/collection-copy.js",
"start": "stencil build --dev --watch --serve",
"test": "npm run test.spec",
"test.spec": "stencil test --spec",
"release": "np --no-2fa",
"version": "npm run build"
Expand Down
18 changes: 18 additions & 0 deletions src/components/icon/icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import { Build, Component, Element, Host, Prop, State, Watch, h } from '@stencil
import { getSvgContent, ioniconContent } from './request';
import { getName, getUrl, inheritAttributes, isRTL } from './utils';

let parser: DOMParser;

@Component({
tag: 'ion-icon',
assetsDirs: ['svg'],
Expand Down Expand Up @@ -134,11 +136,27 @@ export class Icon {
@Watch('icon')
loadIcon() {
if (Build.isBrowser && this.isVisible) {
if (!parser) {
/**
* Create an instance of the DOM parser. This creates a single
* parser instance for the entire app, which is more efficient.
*/
parser = new DOMParser();
}
const url = getUrl(this);

if (url) {
if (ioniconContent.has(url)) {
// sync if it's already loaded
this.svgContent = ioniconContent.get(url);
} else if (url.startsWith('data:')) {
const doc = parser.parseFromString(url, 'text/html');
const svgEl = doc.body.querySelector('svg');
if (svgEl !== null) {
this.svgContent = svgEl.outerHTML;
} else {
this.svgContent = '';
}
} else {
// async if it hasn't been loaded
getSvgContent(url, this.sanitize).then(() => (this.svgContent = ioniconContent.get(url)));
Expand Down
15 changes: 15 additions & 0 deletions src/components/test/csp/icon.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { expect } from '@playwright/test';
import { test } from '../../../utils/test/playwright';

test.describe('icon: csp', () => {

test.beforeEach(async ({ page }) => {
await page.goto('/test/csp');
});

test('should load svg', async ({ page }) => {
const svg = page.locator('ion-icon#icon-usage svg');
await expect(svg).toBeVisible();
});

});
54 changes: 54 additions & 0 deletions src/components/test/csp/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html dir="ltr" lang="en" mode="ios">

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<meta http-equiv="Content-Security-Policy"
content="default-src 'none'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com/*; img-src 'self'; connect-src 'self'; font-src https://fonts.gstatic.com/*'">
<title>IonIcon - Content Security Policy</title>
<script type="module" src="../../build/ionicons.esm.js"></script>
<script nomodule src="../../build/ionicons.js"></script>
<style>
body {
margin: 0;
padding: 16px;
font-size: 32px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1 {
margin: 15px 0 5px;
font-size: 25px;
}

h2 {
margin: 15px 0 5px;
font-size: 18px;
}

.custom {
stroke: red;
fill: goldenrod;
color: black;
}
</style>
</head>

<body>
<h1>Ionicons - Test </h1>

<h2>Default</h2>
<ion-icon src="/assets/chat.svg"></ion-icon>
<ion-icon name="add"></ion-icon>

<ion-icon id="icon-usage"
icon="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>Watch</title><rect x='136' y='136' width='240' height='240' rx='8' ry='8'/><path d='M384 96h-48V16H176v80h-48a32 32 0 00-32 32v256a32 32 0 0032 32h48v80h160v-80h48a32 32 0 0032-32V128a32 32 0 00-32-32zm8 272a24 24 0 01-24 24H144a24 24 0 01-24-24V144a24 24 0 0124-24h224a24 24 0 0124 24z'/></svg>">
</ion-icon>

<ion-icon class="custom"
icon="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>Watch</title><rect x='136' y='136' width='240' height='240' rx='8' ry='8'/><path d='M384 96h-48V16H176v80h-48a32 32 0 00-32 32v256a32 32 0 0032 32h48v80h160v-80h48a32 32 0 0032-32V128a32 32 0 00-32-32zm8 272a24 24 0 01-24 24H144a24 24 0 01-24-24V144a24 24 0 0124-24h224a24 24 0 0124 24z'/></svg>">
</ion-icon>
</body>

</html>
8 changes: 8 additions & 0 deletions stencil.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,14 @@ export const config: Config = {
src: './components/test/*.svg',
dest: './assets/',
},
{
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change was to allow the local dev server to have more than the single index.html test template. Is there another way to accomplish this or is this the recommended path?

src: './svg/*.svg',
dest: './build/svg/',
},
{
src: './components/test/',
dest: './test/',
}
],
empty: false,
serviceWorker: false,
Expand Down