Implementation documentation - add recipe to your site

Kakadu embed

Kakadu offers the ability to embed our proprietary step-by-step viewer on your own web page. It is done by mounting an iframe on your own webpage and pointing the src attribute to our domain and your preferred recipe.

Resource ownership

• The iframe is controlled by you, the customer.
• The content of the recipe displayed in the iframe is controlled by the customer through the kakadu.no admin interface.
• The presentation of the content in the iframe is controlled by Kakadu.

Security considerations

In the context of embedding third-party content, such as Kakadu's iframe, certain security considerations are paramount to ensure the integrity of both the embedding site and the embedded content.

Cross-Site Scripting (XSS) Prevention

One of the primary concerns is the risk of Cross-Site Scripting (XSS) attacks. To mitigate this, it is crucial that the source of the iframe (the 'src' attribute) is from a trusted and secure domain. Kakadu provides such a domain, ensuring that the risk of malicious scripts being introduced into your webpage is minimized.

Protection Against Clickjacking

Clickjacking is another security threat where an attacker tricks a user into clicking on something different from what the user perceives. To combat this, the use of frame-busting tactics is recommended. This prevents the content from being embedded into potentially harmful sites. Kakadu's iframe embeds are designed with security in mind to prevent such misuse.

Handling Mixed Content

For websites served over HTTPS, it is essential to ensure that all embedded content, including iframes, is also served over HTTPS. This practice prevents mixed content warnings and vulnerabilities, ensuring a secure communication channel between the embedding site and the embedded content.

Data Isolation

Iframes provide a level of isolation from the parent page, which is crucial for data privacy. This means sensitive data present on your main site is not accessible to the embedded iframe. Kakadu respects this isolation principle, thereby ensuring that data privacy is maintained.

Regular Security Updates

Staying informed about any updates or changes to the Kakadu platform that might affect security is critical. Regular updates ensure that the embedded iframes are in alignment with the latest security standards and practices.

Attachment: Introduction to iFrames

An iFrame (Inline Frame) is an HTML element that allows you to embed another HTML document within a current HTML document. This is particularly useful for inserting content like videos, maps, or even interactive applications into web pages. The content inside an iFrame is independent of the main page's content and can have its own scroll bar, or be seamlessly integrated.

Creating an iFrame

Step 1: Basic iFrame Syntax

To create an iFrame, use the <iframe> tag in your HTML document. The basic syntax is as follows:

HTML:

<iframe src="URL_of_the_page_you_want_to_embed" width="500" height=“300"></iframe>

src: Specifies the URL of the page to be embedded.
Width and height: Define the dimensions of the iFrame.

Step 2: Setting iFrame Attributes

You can customize the iFrame using various attributes:
frameborder: 0 (no border) or 1 (border).
scrolling: yes, no, or auto (browser decides).
allowfullscreen: Enables full-screen mode if set to true.
sandbox: Applies extra restrictions to the content in the iFrame.

HTML example with additional attributes:

<iframe src="URL/embed" loading="lazy" width="100%" height="550px" frameborder="0" scrolling="no"></iframe>

Step 3: Styling with CSS

You can style iFrames using CSS, like any other HTML element. For instance, to add a border or set margins:

CSS:

iframe {
border: 1px solid black; margin: 10px;
}

Step 4: Handling Responsiveness

To create an iFrame, use the <iframe> tag in your HTML document. The basic syntax is as
follows:

HTML:

<div class="iframe-container">
<iframe src="URL" frameborder="0"></iframe> </div>

CSS:

.iframe-container {
position: relative;
padding-bottom: 56.25%; /* Aspect ratio */ height: 0;
overflow: hidden;
}
‍
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}