@toniq-labs/toniq-nft-frame

toniq-nft-frame

Easy to use and secure iframes for displaying inscriptions of many different types.

• npm package: https://www.npmjs.com/package/@toniq-labs/toniq-nft-frame
• demo: https://toniq-nft-frame-demo.netlify.app
• source code: https://github.com/Toniq-Labs/toniq-nft-frame

How it works and how to use it

There are two main parts here:

• the custom web element: <toniq-nft-frame>
  • This element is published on npm here: https://www.npmjs.com/package/@toniq-labs/toniq-nft-frame
  • It can be used by installing it: npm i @toniq-labs/toniq-nft-frame, and then importing it's main script somewhere in your run-time, and then placing it in your DOM with toniq-nft-frame.
  • You'll need to pass properties to this element using Javascript properties on the element instance. All the properties are listed in the types exported by nft-config.ts.
  • Host the iframe code mentioned below on a separate domain, and pass the path to the iframe code in to this custom element to the childFrameUrl property.
• the iframe code
  • The iframe code is produced by the npm run build command and is then located at packages/toniq-nft-frame/iframe-dist within this repo.
  • This code will need to be hosted on a domain separate from your main website, but on the same domain as all the NFTs / images that it will be loading.

Content Security Policies

These have been tested to work:

• parent domain: default-src <the domain of your hosted iframe> 'unsafe-inline' 'self' blob: data:
• iframe domain: default-src 'unsafe-inline' 'self' blob: data:

iframes

To display HTML ordinals, such as those generated by this BitGen standard, on your website, you must load the inscription inside an iframe. For security purposes, make sure to host your iframe code on another domain or sub-domain than your frontend to prevent inscription code from hijacking your website.

This, combined with iframe sizing difficulties, can make displaying ordinals a daunting task. However, Toniq Labs has created toniq-nft-frame to smooth out the process. Check it out here: https://github.com/Toniq-Labs/toniq-nft-frame.