# Embedding js-ipfs nodes into websites **URL:** \ **Category:** Help\ **Tags:** js-ipfs\ **Created:** [July 11, 2018, 8:58pm UTC](https://discuss.ipfs.tech/t/embedding-js-ipfs-nodes-into-websites/3377 "2018-07-11T20:58:09Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![MirceaKitsune](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ipfs.tech/mirceakitsune/32/1610_2.png) [@MirceaKitsune](https://discuss.ipfs.tech/u/MirceaKitsune)\ **Post date:** [July 11, 2018, 8:58pm UTC](https://discuss.ipfs.tech/t/embedding-js-ipfs-nodes-into-websites/3377/1 "2018-07-11T20:58:09Z")
Someone suggested that this may in fact be possible, but I don’t know how to check and couldn’t find more information via search engines. My question is about js-ipfs: I would like to know whether it can be embedded within websites themselves, rather than only provided by browser addons such as IPFS Companion. This is important as I’m thinking of making an IPFS based site. The site itself may be hosted anywhere (Github pages, download and open index.html locally, or even on IPFS itself) but its functionality will require IPFS and the js-ipfs-api interface. For the site to be user friendly, it cannot ask every visitor to install go-ipfs on their computer… and although I could use [gateway.ipfs.io](http://gateway.ipfs.io) that wouldn’t provide essential functionalities like pinning or seeding. It would be ideal if my site’s index.html file could simply contain a tag that links to the core js-ipfs.js file (from say Github). Once this script is linked, the browser automatically learns how to start a js-ipfs node which will run for as long as a browser tab is open. My own script is spawned after that and uses js-ipfs-api commands to automatically download or add or pin files in the background. This sounds too easy to be true, but I heard people saying it should be possible. Would such a thing at least work for all Chromium and Firefox users? Are there any limitations or security issues in having web pages spawn js-ipfs nodes in browsers? Thank you. ---
**Author:** ![MirceaKitsune](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ipfs.tech/mirceakitsune/32/1610_2.png) [@MirceaKitsune](https://discuss.ipfs.tech/u/MirceaKitsune)\ **Post date:** [July 12, 2018, 2:19pm UTC](https://discuss.ipfs.tech/t/embedding-js-ipfs-nodes-into-websites/3377/2 "2018-07-12T14:19:32Z")
My question has been answered in [this thread](https://discuss.ipfs.tech/t/embedding-and-using-orbitdb-exclusively-from-browser-html-javascript). I managed to get a browser node working using the browser example in OrbitDB. I can create and read a database through IPFS flawlessly! There’s only one minor issue left: What is the URL of the gateway used by the browser node? I tried [http://127.0.0.1:8080/ipfs](http://127.0.0.1:8080/ipfs) while keeping the browser tab open but there’s nothing at that address. If I want to access a file by its hash, what is the URL I’ll use in this case? ---
**Author:** ![josselinchevalay](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ipfs.tech/josselinchevalay/32/3078_2.png) [@josselinchevalay](https://discuss.ipfs.tech/u/josselinchevalay)\ **Post date:** [July 12, 2018, 2:52pm UTC](https://discuss.ipfs.tech/t/embedding-js-ipfs-nodes-into-websites/3377/3 "2018-07-12T14:52:51Z")
i’m not sure is possible to enable gateway when you use js-ipfs in browser @daviddias exact ? ---
**Author:** ![lidel](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ipfs.tech/lidel/32/9853_2.png) [@lidel](https://discuss.ipfs.tech/u/lidel)\ **Post date:** [July 15, 2018, 6:45pm UTC](https://discuss.ipfs.tech/t/embedding-js-ipfs-nodes-into-websites/3377/4 "2018-07-15T18:45:33Z")
FYI js-ipfs running in browser is unable to open and listen on new TCP ports, so Gateway feature is unavailable in this context. Keep in mind that you have access to real IPFS API, so gateway is not really needed – you can read data natively. ---
**Author:** ![MirceaKitsune](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ipfs.tech/mirceakitsune/32/1610_2.png) [@MirceaKitsune](https://discuss.ipfs.tech/u/MirceaKitsune)\ **Post date:** [July 16, 2018, 12:28am UTC](https://discuss.ipfs.tech/t/embedding-js-ipfs-nodes-into-websites/3377/5 "2018-07-16T00:28:18Z")
Oh wow… that is a huge limitation, though I vaguely remember hearing something about that in the past. How do you access files through the node in that case, and obtain an URL through which you can embed them in the HTML page? ---
**Author:** ![lidel](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ipfs.tech/lidel/32/9853_2.png) [@lidel](https://discuss.ipfs.tech/u/lidel)\ **Post date:** [August 4, 2018, 7:21am UTC](https://discuss.ipfs.tech/t/embedding-js-ipfs-nodes-into-websites/3377/6 "2018-08-04T07:21:48Z")
Files can be accessed thru IPFS API. A JS example for reading a file can be found in spec for [`ipfs.files.cat`](https://github.com/ipfs/interface-ipfs-core/blob/master/SPEC/FILES.md#filescat). In short, this is how you add/get raw data. You could add it to your page as data URL, or if you need “a linkable URL”, then you just point at the CID at a public or own HTTP Gateway… In content addressing in won’t matter from which gateway you are fetching the data. ---
**Author:** ![MirceaKitsune](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ipfs.tech/mirceakitsune/32/1610_2.png) [@MirceaKitsune](https://discuss.ipfs.tech/u/MirceaKitsune)\ **Post date:** [August 4, 2018, 6:47pm UTC](https://discuss.ipfs.tech/t/embedding-js-ipfs-nodes-into-websites/3377/7 "2018-08-04T18:47:00Z")
Thanks! Figured it would have to be something like a JavaScript function for accessing the files. I’m a little concerned as to how much you can do with the raw data alone however… namely how you embed a file on a web page. Say I’m accessing a jpg image in my browser node: How do I easily place it inside an `` element which I generate or modify from the script, without having to point to another IPFS gateway? Thanks. ---
**Author:** ![lidel](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ipfs.tech/lidel/32/9853_2.png) [@lidel](https://discuss.ipfs.tech/u/lidel)\ **Post date:** [December 20, 2018, 10:01pm UTC](https://discuss.ipfs.tech/t/embedding-js-ipfs-nodes-into-websites/3377/8 "2018-12-20T22:01:19Z")
@MirceaKitsune you can experiment with replacing gateway URLs with inlined data (see [DataURL](http://dataurl.net)) returned from js-ipfs . For example, to create `` element for data fetched from IPFS: ```auto let imgElement = document.createElement('img') let imgData = await ipfs.cat(`QmbWqxBEKC3P8tqsKc98xmWNzrzDtRLMiMPL8wBuTGsMnR`) imgElement.src = 'data:image/jpeg;base64,' + imgData.toString('base64') ``` ---
**Author:** ![MirceaKitsune](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ipfs.tech/mirceakitsune/32/1610_2.png) [@MirceaKitsune](https://discuss.ipfs.tech/u/MirceaKitsune)\ **Post date:** [December 20, 2018, 10:44pm UTC](https://discuss.ipfs.tech/t/embedding-js-ipfs-nodes-into-websites/3377/9 "2018-12-20T22:44:09Z")
That is extremely helpful! I shall keep this in mind for when I may attempt this. Thanks! ---
**Author:** ![adamskrodzki](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ipfs.tech/adamskrodzki/32/2940_2.png) [@adamskrodzki](https://discuss.ipfs.tech/u/adamskrodzki)\ **Post date:** [December 22, 2018, 11:21am UTC](https://discuss.ipfs.tech/t/embedding-js-ipfs-nodes-into-websites/3377/10 "2018-12-22T11:21:07Z")
Hi, @MirceaKitsune I’m trying to do similar thing + some stuff with pubsub I’ve managed to run IPFS only website where every client starts to be IPFS node and pins a content related to the website, so as long as someone is online website will become available. Why I’m trying to achieve now is to load website not from url like: [https://ipfs.io/ipfs/QmRTSA1UFHSx3z7taNRwUVM8AjB2EQwKvyZu3BfJg9QRtZ/home.html](https://ipfs.io/ipfs/QmRTSA1UFHSx3z7taNRwUVM8AjB2EQwKvyZu3BfJg9QRtZ/home.html) but from url like [https://myowndomain.com](https://myowndomain.com) Any idea how to achieve it? I guess workflow is like that: 1. Load some static html + javascript that will setup ipfs node in a browser 2. Fetch data from QmRTSA1UFHSx3z7taNRwUVM8AjB2EQwKvyZu3BfJg9QRtZ 3. rewrite all urls as it was local I have problems with step 2 and 3. Have You ever tried something similar? ---
**Author:** ![MirceaKitsune](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ipfs.tech/mirceakitsune/32/1610_2.png) [@MirceaKitsune](https://discuss.ipfs.tech/u/MirceaKitsune)\ **Post date:** [December 22, 2018, 1:51pm UTC](https://discuss.ipfs.tech/t/embedding-js-ipfs-nodes-into-websites/3377/11 "2018-12-22T13:51:24Z")
I haven’t really tried much yet, my ideas are in planning stage. I think what you want is to first put the site on an IPNS domain, then register that domain to a DNS registar (so instead of a hash you have something like [somedomain.com](http://somedomain.com)). Normally this shouldn’t affect the functionality of js-ipfs… of course as long as you can still point to the hashes of the necessary files. ---
**Author:** ![lidel](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ipfs.tech/lidel/32/9853_2.png) [@lidel](https://discuss.ipfs.tech/u/lidel)\ **Post date:** [December 23, 2018, 9:09am UTC](https://discuss.ipfs.tech/t/embedding-js-ipfs-nodes-into-websites/3377/12 "2018-12-23T09:09:39Z")
@adamskrodzki this should be helpful: - [https://docs.ipfs.io/guides/concepts/dnslink/](https://docs.ipfs.io/guides/concepts/dnslink/) - [https://developers.cloudflare.com/distributed-web/ipfs-gateway/connecting-website/](https://developers.cloudflare.com/distributed-web/ipfs-gateway/connecting-website/) ---
**Author:** ![adamskrodzki](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ipfs.tech/adamskrodzki/32/2940_2.png) [@adamskrodzki](https://discuss.ipfs.tech/u/adamskrodzki)\ **Post date:** [December 23, 2018, 11:05am UTC](https://discuss.ipfs.tech/t/embedding-js-ipfs-nodes-into-websites/3377/13 "2018-12-23T11:05:48Z")
@lidel Thank You for help, cloudFlare works for me 🙂 ---
**Author:** ![MirceaKitsune](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ipfs.tech/mirceakitsune/32/1610_2.png) [@MirceaKitsune](https://discuss.ipfs.tech/u/MirceaKitsune)\ **Post date:** [December 23, 2018, 2:14pm UTC](https://discuss.ipfs.tech/t/embedding-js-ipfs-nodes-into-websites/3377/14 "2018-12-23T14:14:07Z")
There is an issue I’m still concerned about here: Even if you can get the raw data and put it into an image, won’t some browsers complain about the MIME type and refuse to display the content? I’ve had that issue before: Firefox for instance doesn’t let you reference a text file as a script, it complains that the MIME is “text” and not “script” even if it’s really the same format. Has this approach been tested and confirmed not to trigger that? Including on Firefox? This includes both loading scripts, embedding images, embedding sound, and embedding video. ---
**Author:** ![lidel](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ipfs.tech/lidel/32/9853_2.png) [@lidel](https://discuss.ipfs.tech/u/lidel)\ **Post date:** [January 22, 2019, 11:16pm UTC](https://discuss.ipfs.tech/t/embedding-js-ipfs-nodes-into-websites/3377/15 "2019-01-22T23:16:11Z")
To determine the correct content-type you can do mime-sniffing based on a few first bytes using things like [file-type](https://www.npmjs.com/package/file-type). That being said, if you want to inject a lot of content read from js-ipfs running on a website, doing it via [Service Worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) may be a better idea: it removes dataURL hack and restores standard HTTP semantics. See demo in the middle of [https://js.ipfs.io](https://js.ipfs.io), basic examples at [ipfs/ipfs-service-worker](https://github.com/ipfs/ipfs-service-worker) and gateway code at [ipfs-shipyard/service-worker-gateway](https://github.com/ipfs-shipyard/service-worker-gateway).