Emebdable content in Arbeidsflate

Embadable content in Arbeidsflate is a feature that allows users to embed external content, such as markdown and html (only legacy content), directly in Arbeidsflate interface, provided a url to the content and a dialog token.

Content (text/plain) adheres to the current version of CommonMark (0.31.2). For examples of how to use the markdown syntax, see CommonMark examples. With the extension of GitHub Flavored Markdown to support pipe and dash syntax for tables.

Process

1. Embedable content is fetched from the provided URL:
   • (For mainContentReference) The content is fetched from the URL specified in the mainContentReference field of the dialog on loading the dialog details.
   • (For contentReference for transmissions) The content is fetched only when the user expands the transmission in the dialog details.
2. The content is sanitized to ensure security and integrity and is transformed into a React component tree:
   • (For Markdown) Transforms markdown into a sanitized, styled React component tree, allowing safe and customizable rendering.
   • (For legacy HTML) Transforms raw HTML into sanitized, styled React components, ensuring safe display of dynamic HTML.
3. The sanitized content is then displayed in the Arbeidsflate interface.

Request headers

Arbeidsflate sends the same set of headers on every content reference request, both for mainContentReference and for contentReference on transmissions.

Header	Example value	Purpose
Authorization	Bearer <dialog token>	The dialog token issued by Dialogporten for the dialog being viewed. Use it to authorize the request and to identify the end user.
Accept-Language	en, nb;q=0.9, nn;q=0.8	The language the end user has selected in Arbeidsflate, followed by the remaining supported languages (nb, nn, en) with descending q values. Serve the content in the highest ranked language you support.
Prefer	timezone="Europe/Oslo"	The end user’s IANA time zone, read from the browser (Intl.DateTimeFormat().resolvedOptions().timeZone). Format dates and times in the content for this time zone instead of assuming UTC or Norwegian local time. See RFC 7240.
Content-Type	text/plain	The content type Arbeidsflate expects back.

Notes for service owners:

• Authorization and Prefer are not CORS-safelisted request headers, so the content endpoint must allow them in Access-Control-Allow-Headers on the preflight response. A response that only allows Authorization will start failing preflight once Prefer is sent.
• The response varies by Accept-Language and Prefer, so set Vary: Accept-Language, Prefer if the content is cached.
• The time zone comes from the end user’s device and can be any IANA name (for example America/New_York for a user abroad), not only Europe/Oslo. Fall back to Europe/Oslo if the value is missing or unknown to you.
• Arbeidsflate caches the fetched content per dialog and language for the duration of the visit, so expect one request per language the user switches to.

When the content cannot be shown

Case	Shown as
The URL is urn:dialogporten:unauthorized	A blue Ingen tilgang alert. Nothing is fetched.
The endpoint answers 403	A blue Ingen tilgang alert.
The endpoint answers 404	A red Ops! Noe gikk galt med innlastingen alert with an Oppdater button.
Any other error, 401 included	The same red alert, after two retries one second apart.

Restrictions

For security reasons, the content is sanitized and only certain tags are allowed.

Allowed HTML tags

Allowed HTML tags

HTML Tag	Purpose	Markdown Equivalent / Example
<p>	Paragraphs	Plain text separated by a blank line
<em>	Italic / emphasis	*italic* or _italic_
<strong>	Bold / strong emphasis	**bold** or __bold__
<ul> / <ol> / <li>	Lists	- item, 1. item
<a>	Links	[link](https://example.com)
<code>	Inline code	`inline code`
<pre><code>	Code blocks	js<br>const x = 1;<br>
<blockquote>	Blockquotes	> quoted text
<hr>	Horizontal rule/separator	--- or ***
<h1>–<h6>	Headings	# H1, ## H2, …, ###### H6
<br>	Line break	Line ends with 2+ spaces + Enter
<table> / <thead> / <tbody> / <tr> / <th> / <td>	Tabular data	Markdown: | Syntax | Description |\n| ----------- | ----------- |\n| Header | Title |\n| Paragraph | Text | HTML: <table>\n <thead>\n <tr>\n <th>Syntax</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Header</td>\n <td>Title</td>\n </tr>\n <tr>\n <td>Paragraph</td>\n <td>Text</td>\n </tr>\n </tbody>\n</table>

Allowed Attributes

Only href for <a> tags is allowed, and it must be a valid URL. All other attributes are stripped for security reasons.