Skip to content

Commit

Permalink
Merge branch 'master' into mraszyk/use-quill-in-sns-testflight
Browse files Browse the repository at this point in the history
  • Loading branch information
sesi200 authored Feb 20, 2023
2 parents be8aea8 + e7cd8ed commit b0f3e8e
Show file tree
Hide file tree
Showing 34 changed files with 539 additions and 222 deletions.
1 change: 1 addition & 0 deletions .github/CODEOWNERS
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,6 @@ docs/developer-docs/updates/release-notes/ @dfinity/dx
docs/developer-docs/build/agents @dfinity/dx
docs/developer-docs/build/cdks @dfinity/dx
docs/developer-docs/integrations/rosetta @dfinity/finint
docs/developer-docs/security @dfinity/product-security

# Each piece of documentation must be owned by the respective teams
2 changes: 1 addition & 1 deletion docs/developer-docs/backend/backend-tutorials/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ The following tutorials introduce the basics for writing dapps that run on the I

- [Customize the frontend](../../frontend/custom-frontend.md) illustrates using a simple React framework to create a new frontend for the default sample canister and guides you through some basic modifications to customize the interface displayed. If you already know how to use CSS, HTML, JavaScript, and React or other frameworks to build your user interface, you can skip this tutorial.

- [Add a stylesheet](../../frontend/my-contacts.md) illustrates how to add a stylesheet when you use React to create a new frontend for your project. If you already know how to add stylesheets to React, you can skip this tutorial.
- [Add a stylesheet](../../frontend/add-stylesheet.md) illustrates how to add a stylesheet when you use React to create a new frontend for your project. If you already know how to add stylesheets to React, you can skip this tutorial.

- [Make inter-canister calls](./intercanister-calls.md) illustrates how to make simple calls to functions defined in one canister from another canister in the same project.

Expand Down

This file was deleted.

This file was deleted.

Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
1 change: 0 additions & 1 deletion docs/developer-docs/build/_attachments/dev-work-flow-2.svg

This file was deleted.

Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
sidebar_position: 2
---

# Add a stylesheet

Cascading stylesheets are an important part of any frontend user interface. The default starter is configured to import a `main.css` file that you can edit, but you may prefer to import your stylesheet into a JavaScript file, or to use an alternate format such as Syntactically Awesome Style Sheets, aka SCSS. This tutorial illustrates how to configure webpack to import a stylesheet by walking through building a contact dapp. If you already know how to add cascading stylesheets (CSS) to a webpack-based project, you can skip this tutorial.
Expand Down
4 changes: 4 additions & 0 deletions docs/developer-docs/frontend/custom-frontend.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
sidebar_position: 1
---

# Customize the frontend

Now that you have a basic understanding of how to create, build, and deploy a simple dapp and are familiar with the default project files and sample frontend, you might want to start experimenting with different ways to customize the frontend user experience for your project.
Expand Down
4 changes: 2 additions & 2 deletions docs/developer-docs/frontend/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ Here are some quick links to tutorials with example code for various stages of d

- Using [React and compiled JavaScript](./custom-frontend.md) to embed HTML attributes and elements directly in a page.

- Using [React and TypeScript](./my-contacts.md) to import CSS properties from an external file.
- Using [React and TypeScript](./add-stylesheet.md) to import CSS properties from an external file.

## How the default templates are used

Expand Down Expand Up @@ -131,7 +131,7 @@ plug-ins, modules, and other custom configuration to suit your needs. The specif
the `webpack.config.js` configuration largely depend on the other tools and frameworks you want to use.

For example, if you have experimented with the [Customize the frontend](custom-frontend)
or [Add a stylesheet](my-contacts) frontend tutorials, you might have modified the following section to work with React
or [Add a stylesheet](add-stylesheet) frontend tutorials, you might have modified the following section to work with React
JavaScript:

module: {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
---
sidebar_position: 2
sidebar_label: "Canister development in Rust"
sidebar_label: "Canister development"
---
# Canister development in Rust security best practices
# Canister development security best practices

This document contains canister development best practices for both Motoko and Rust.

## Smart Contracts Canister Control

Expand Down
222 changes: 222 additions & 0 deletions docs/references/asset-canister.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,222 @@
---
title: Asset Canister
---

# The Asset Canister

The [Asset Canister](https://github.com/dfinity/sdk/tree/master/src/canisters/frontend/ic-frontend-canister) provides
you with a mechanism to store and retrieve static assets from a canister deployed on the Internet
Computer. It is generally used to serve HTML, JS, and CSS assets
for [single page applications](https://en.wikipedia.org/wiki/Single-page_application), i.e. your application's frontend.

DFX provides this canister by default when your canister `type` is set to `assets` in `dfx.json`.

For example:

```json
{
"canisters": {
"www": {
"frontend": {
"entrypoint": "assets/src/index.html"
},
"source": [
"assets/assets",
"assets/src"
],
"type": "assets"
}
},
"defaults": {
"build": {
"args": "",
"packtool": ""
}
},
"version": 1
}
```

:::caution
The asset canister can host roughly 1GB 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.
:::

<br/>

# Anatomy

The Asset Canister is written in Rust and exposes the following methods:

```go
#[update]
async fn authorize(other: Principal)

#[update]
async fn grant_permission(arg: GrantPermissionArguments)

#[update]
async fn validate_grant_permission(arg: GrantPermissionArguments) -> Result<String, String>

#[update]
async fn deauthorize(other: Principal)

#[update]
async fn revoke_permission(arg: RevokePermissionArguments)

#[update]
async fn validate_revoke_permission(arg: RevokePermissionArguments) -> Result<String, String>

#[update]
fn list_authorized() -> Vec<Principal>

#[query(manual_reply = true)]
fn list_permitted(arg: ListPermittedArguments) -> ManualReply<Vec<Principal>>

#[update]
async fn take_ownership()

#[query]
fn retrieve(key: Key) -> RcBytes

#[update(guard = "can_commit")]
fn store(arg: StoreArg)

#[update(guard = "can_prepare")]
fn create_batch() -> CreateBatchResponse

#[update(guard = "can_prepare")]
fn create_chunk(arg: CreateChunkArg) -> CreateChunkResponse

#[update(guard = "can_commit")]
fn create_asset(arg: CreateAssetArguments)

#[update(guard = "can_commit")]
fn set_asset_content(arg: SetAssetContentArguments)

#[update(guard = "can_commit")]
fn unset_asset_content(arg: UnsetAssetContentArguments)

#[update(guard = "can_commit")]
fn delete_asset(arg: DeleteAssetArguments)

#[update(guard = "can_commit")]
fn clear()

#[update(guard = "can_commit")]
fn commit_batch(arg: CommitBatchArguments)

#[query]
fn get(arg: GetArg) -> EncodedAsset

#[query]
fn get_chunk(arg: GetChunkArg) -> GetChunkResponse

#[query]
fn list() -> Vec<AssetDetails>

#[query]
fn certified_tree() -> CertifiedTree

#[query]
fn http_request(req: HttpRequest) -> HttpResponse

#[query]
fn http_request_streaming_callback(token: StreamingCallbackToken) -> StreamingCallbackHttpResponse

#[query]
fn get_asset_properties(key: Key) -> AssetProperties

#[update(guard = "can_commit")]
fn set_asset_properties(arg: SetAssetPropertiesArguments)
```

<br/>

# Configuration

You can configure how the Asset Canister 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 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.

Here is a sample:

```json
[
{
"match": "**/*",
"headers": {
// Security: The Content Security Policy (CSP) given below aims at working with many apps rather than providing maximal security.
// We recommend tightening the CSP for your specific application. Some recommendations are as follows:
// - Use the CSP Evaluator (https://csp-evaluator.withgoogle.com/) to validate the CSP you define.
// - Follow the “Strict CSP” recommendations (https://csp.withgoogle.com/docs/strict-csp.html). However, note that in the context of the IC,
// nonces cannot be used because the response bodies must be static to work well with HTTP asset certification.
// Thus, we recommend to include script hashes (in combination with strict-dynamic) in the CSP as described
// in https://csp.withgoogle.com/docs/faq.html in section “What if my site is static and I can't add nonces to scripts?”.
// See for example the II CSP (https://github.com/dfinity/internet-identity/blob/main/src/internet_identity/src/http.rs).
// - It is recommended to tighten the connect-src directive. With the current CSP configuration the browser can
// make requests to https://*.ic0.app, hence being able to call any canister via https://ic0.app/api/v2/canister/{canister-ID}.
// This could potentially be used in combination with another vulnerability (e.g. XSS) to exfiltrate private data.
// The developer can configure this policy to only allow requests to their specific canisters,
// e.g: connect-src 'self' https://ic0.app/api/v2/canister/{my-canister-ID}, where {my-canister-ID} has the following format: aaaaa-aaaaa-aaaaa-aaaaa-aaa
// - It is recommended to configure style-src, style-src-elem and font-src directives with the resources your canister is going to use
// instead of using the wild card (*) option. Normally this will include 'self' but also other third party styles or fonts resources (e.g: https://fonts.googleapis.com or other CDNs)

// Notes about the CSP below:
// - script-src 'unsafe-eval' is currently required because agent-js uses a WebAssembly module for the validation of bls signatures.
// There is currently no other way to allow execution of WebAssembly modules with CSP.
// See: https://github.com/WebAssembly/content-security-policy/blob/main/proposals/CSP.md.
// - We added img-src data: because data: images are used often.
// - frame-ancestors: none mitigates clickjacking attacks. See https://owasp.org/www-community/attacks/Clickjacking.
"Content-Security-Policy": "default-src 'self';script-src 'self' 'unsafe-eval';connect-src 'self' https://ic0.app https://*.ic0.app;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;",
// Security: The permissions policy disables all features for security reasons. If your site needs such permissions, activate them.
// To configure permissions go here https://www.permissionspolicy.com/
"Permissions-Policy": "accelerometer=(), ambient-light-sensor=(), autoplay=(), battery=(), camera=(), cross-origin-isolated=(), display-capture=(), document-domain=(), encrypted-media=(), execution-while-not-rendered=(), execution-while-out-of-viewport=(), fullscreen=(), geolocation=(), gyroscope=(), keyboard-map=(), magnetometer=(), microphone=(), midi=(), navigation-override=(), payment=(), picture-in-picture=(), publickey-credentials-get=(), screen-wake-lock=(), sync-xhr=(), usb=(), web-share=(), xr-spatial-tracking=(), clipboard-read=(), clipboard-write=(), gamepad=(), speaker-selection=(), conversion-measurement=(), focus-without-user-activation=(), hid=(), idle-detection=(), interest-cohort=(), serial=(), sync-script=(), trust-token-redemption=(), window-placement=(), vertical-scroll=()",
// Security: Mitigates clickjacking attacks.
// See: https://owasp.org/www-community/attacks/Clickjacking.
"X-Frame-Options": "DENY",
// Security: Avoids forwarding referrer information to other origins.
// See: https://owasp.org/www-project-secure-headers/#referrer-policy.
"Referrer-Policy": "same-origin",
// Security: Tells the user’s browser that it must always use HTTPS with your site.
// See: https://owasp.org/www-project-secure-headers/#http-strict-transport-security
"Strict-Transport-Security": "max-age=31536000; includeSubDomains",
// Security: Prevents the browser from interpreting files as a different MIME type to what is specified in the Content-Type header.
// See: https://owasp.org/www-project-secure-headers/#x-content-type-options
"X-Content-Type-Options": "nosniff",
// Security: Enables browser features to mitigate some of the XSS attacks. Note that it has to be in mode=block.
// See: https://owasp.org/www-community/attacks/xss/
"X-XSS-Protection": "1; mode=block"
},
// redirect all requests from .raw.ic0.app to .ic0.app (this redirection is the default)
"allow_raw_access": false
}
]
```

# Troubleshooting

Here are some common resolutions for issues encountered with the Asset canister.

### Asset canister fails to upgrade

It is likely that the total size of all the static files stored in your Asset canister exceed the
recommended 1GB limit. The resolution is to uninstall and redeploy your canister code.

```bash
dfx canister uninstall-code <CANISTER NAME or ID>
```

```bash
dfx deploy --upgrade-unchanged <CANISTER NAME>
```

:::caution
This will incur downtime. This first uninstalls the WASM module from your canister. During this period, your canister
will not be reachable. The second command redeploys with fresh state, after which point, your canister will be available
to serve assets again.
:::
31 changes: 31 additions & 0 deletions docs/tokenomics/identity-auth/auth-how-to.md
Original file line number Diff line number Diff line change
Expand Up @@ -170,3 +170,34 @@ If you have set up a recovery phrase or recovery security key for an Identity An
**3. Input your seed phrase**

![your seed phrase](../_attachments/your-seed-phrase.png)

## How to connect your anchor to identity.internetcomputer.org using a trusted device

:::note

This flow requires that you can access https://identity.ic0.app. If you cannot connect to https://identity.ic0.app you will need to [use your recovery phrase](#migrate-recovery-phrase).

:::

1. Visit https://identity.internetcomputer.org with your browser.
2. Select "Manage existing" or "More options".
3. Select “Add a new device?” and follow the instructions shown on the screen on any device where you have access to https://identity.ic0.app. It can also be the same device.

## How to recover your anchor on identity.internetcomputer.org using a recovery phrase {#migrate-recovery-phrase}

:::note

This flow requires a recovery phrase. If you have not done so already, go to https://identity.ic0.app and add one by authenticating and selecting "Add recovery method" on the anchor management page.

:::

1. Visit https://identity.internetcomputer.org with your browser.
2. Select "Manage existing" or "More options".
3. Select "Lost Access?"
4. Enter your recovery phrase
5. Add the current device to your anchor by selecting
1. Add new device
2. External Hardware

:::caution Recovery devices (External Hardware) added on https://identity.ic0.app will not work on https://identity.internetcomputer.org!

Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# Step 3 - Adding variables and methods
---
sidebar_position: 3
title: Step 3 - Adding variables and methods
---

# Step 3 - Adding variables and methods

Now let's start adding some code to our backend!

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
---
sidebar_position: 1
title: Step 1 - Backend overview
---

# Step 1 - Backend intro
In first part of the tutorial we will create a backend for our application that will be implemented as Internet Computer canister.

Backend canisters have a default user interface called Candid UI that will allow you to interact with them without writing any frontend code. Here's how Candid UI for our project will look like at the end of this step:
![Candid UI screenshot (final)](__attachments/Screenshot%202022-12-08%20at%[email protected])
![Candid UI screenshot (final)](./__attachments/Screenshot%202022-12-08%20at%[email protected])


Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
---
sidebar_position: 2
title: Step 2 - Creating a project
---

# Step 2 - Creating a project

## Creating a project from a template
Expand All @@ -8,7 +13,7 @@ $ dfx new poll
```

SDK will create an project from a template in a folder "poll":
![dfx new poll terminal image](__attachments/dfx%20new.png)
![dfx new poll terminal image](./__attachments/dfx%20new.png)

## Understanding the project structure

Expand Down
Loading

0 comments on commit b0f3e8e

Please sign in to comment.