Skip to content
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.

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

update: asset certification info #3916

Merged
merged 5 commits into from
Jan 3, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -9,21 +9,35 @@ import { GlossaryTooltip } from "/src/components/Tooltip/GlossaryTooltip";

<MarkdownChipRow labels={["Intermediate", "Concept"]} />



You can configure how a frontend <GlossaryTooltip>canister</GlossaryTooltip> responds to requests for specific assets by defining your
desired configuration in a file named `.ic-assets.json` Each entry in `.ic-assets.json` allows for specifying a [glob](https://code.visualstudio.com/docs/editor/glob-patterns) pattern along with the headers to be returned in the response for any file that matches the pattern. You may also dictate whether redirects are performed from the non-certified endpoint to a certified endpoint for any given filename pattern.
desired configuration in a file named `.ic-assets.json5` Each entry in `.ic-assets.json5` allows for specifying a [glob](https://code.visualstudio.com/docs/editor/glob-patterns) pattern along with the headers to be returned in the response for any file that matches the pattern. You may also dictate whether redirects are performed from the non-certified endpoint to a certified endpoint for any given filename pattern.

## Content Security Policies (CSP)

By default, frontend canisters created with `dfx new` contain the following Content Security Policy (CSP) in the project's `.ic-assets.json` file:
By default, frontend canisters created with `dfx new` contain the following Content Security Policy (CSP) in the project's `.ic-assets.json5` file:

```
"Content-Security-Policy": "default-src 'self';script-src 'self';connect-src 'self' http://localhost:* https://icp0.io https://*.icp0.io https://icp-api.io;img-src 'self' data:;style-src * 'unsafe-inline';style-src-elem * 'unsafe-inline';font-src *;object-src 'none';base-uri 'self';frame-ancestors 'none';form-action 'self';upgrade-insecure-requests;",
```

This CSP includes `img-src data` as data images are frequently included in frontend interfaces, and `frame-ancestors: none` is used to mitigate [clickjacking attacks](https://owasp.org/www-community/attacks/Clickjacking).

## Asset certification

The [ic-asset-certification](https://crates.io/crates/ic-asset-certification) Rust crate can be used to:

- Serve certified assets from the same canister as their primary “backend” canister.

- Embed assets directly into a canister’s Wasm rather than uploading them at runtime.

- Create custom routing logic, such as:

- Serving 404 pages in multi-page apps.

- Serving multiple frontends from the same canister.

- Certify more complex caching or streaming scenarios.

## Security recommendations

This default Content Security Policy aims to work with as many applications as possible rather than providing the maximum security. It is recommended that you update this policy for your application's specific needs by utilizing tools such as:
Expand Down
33 changes: 0 additions & 33 deletions docs/developer-docs/web-apps/application-frontends/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -72,37 +72,6 @@ In `dfx.json`, these default settings will resemble the following:
}
```

## Motoko asset canisters

The [Motoko server](https://mops.one/server) and [certified HTTP](https://mops.one/certified-http) packages can be used for creating asset canisters using the Motoko language.

## Rust asset canisters

The [`ic-asset`](https://crates.io/crates/ic-asset) Rust crate can be used to develop your project's frontend canister.

Additionally, the [ic-http-certification](https://crates.io/crates/ic-http-certification) crate can be used to:

- Serve certified assets from the same canister as their primary “backend” canister.

- Embed assets directly into a canister’s Wasm rather than uploading them at runtime.

- Create custom routing logic, such as:

- Serving 404 pages in multi-page apps.

- Serving multiple frontends from the same canister.

- Certify more complex caching or streaming scenarios.


Other third-party options for serving assets include:

- [`ic-pluto`](https://crates.io/crates/ic-pluto)

## TypesScript asset canisters

The [Express HTTP server](https://demergent-labs.github.io/azle/) package via Azle can be used to create asset canisters in TypeScript.

## Limitations

The frontend canister can host roughly 1GiB in static files. It is recommended that you distribute your files across multiple canisters if the total size of all your assets begins to exceed this amount. Once you exceed this figure, your canister may fail to upgrade.
Expand Down Expand Up @@ -149,8 +118,6 @@ let path = HttpCertificationPath::wildcard("/js");

- [Asset canister architecture reference](/docs/current/references/asset-canister).

- Using [raw HTML and JavaScript](/docs/current/motoko/main/getting-started/motoko-introduction) to display a simple HTML entry page.

- [Vite + React + Motoko](https://github.com/rvanasa/vite-react-motoko) template example.

- [Vite + SvelteKit + Motoko](https://github.com/letmejustputthishere/vite-sveltekit-motoko-ii/tree/main) template example.
Expand Down
Loading