Skip to content

Commit

Permalink
update: asset certification info (#3916)
Browse files Browse the repository at this point in the history
* update http cert info

* Update overview.mdx

* Update asset-security.mdx
  • Loading branch information
jessiemongeon1 authored Jan 3, 2025
1 parent ad2505b commit 1c3226d
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 37 deletions.
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

0 comments on commit 1c3226d

Please sign in to comment.