Comments (12)
Hmmm, so I made a new example testing loading external stylesheet and iframe with both raw relative path ("style.css") and dot slash ("./style.css"):
For first one I did "ipfs add -r ." in the directory and then typed "https://ipfs.io/ipfs/" in the url bar and pasted in the CID:
https://ipfs.io/ipfs/QmaXPQ28xM7h8AjnbJ8cD6Ux4mgvqtwGRYjgsxEPQ6kJTX/
While still in the same dir, I did "ipfs-deploy .", and it automatically opened a new tab with:
https://ipfs.infura.io/ipfs/QmaXPQ28xM7h8AjnbJ8cD6Ux4mgvqtwGRYjgsxEPQ6kJTX
Notice the difference? The ipfs.io gateway appends a trailing slash. If you remove it and reload, the gateway re-adds it. The content loads correctly in the ipfs.io gateway.
However the Infura URL does not load either relative path link, and does not automatically add a slash to the end.
If you manually add a slash, the content loads correctly in Infura URL:
https://ipfs.infura.io/ipfs/QmaXPQ28xM7h8AjnbJ8cD6Ux4mgvqtwGRYjgsxEPQ6kJTX/
So an easy fix in ipfs-deploy is to add the slash at the end of the URL opened by the tool.
Follow-ups could be to write a gateway spec for path handling, and file an issue with Infura about this behavior.
from ipfs-deploy.
Hm, so this is an Infura problem? These types of gateway differences are exactly the type of incompatibility that trips up devs trying to do very basic things.
from ipfs-deploy.
@wakqasahmed as far as I understand, ../pets.json
is relative to to page you have opened at the moment and not to the JS file location (not sure though)
So, if you're on:
ipfs.io/ipfs/QmT6SgXKChuzz9nCTu8ZNtc8y7wLR3DjvH3rsEkcreiSDG
Then, ../pets.json
will be
ipfs.io/ipfs/pets.json
if that js file will only be opened at that location, I'd suggest you to change ../pets.json
to ./pets.json
.
You might want to take advantage of HTML <base>
tag which makes all relative links relative to the path enclosed in that tag.
from ipfs-deploy.
@autonome it doesn't seem to be a problem of ipfs-deploy
because the file is being correctly uploaded. Although infura.io
gateway is sending the styles as text/plain
and that, with X-Content-Type-Options: nosniff
, won't allow it to be used.
Take this hash for example: QmUJgcsYqwcbyGAECgN5Ybcof524d7kBKoLHEZtFonRC3i
. It has an index.html
and a style.css
.
On infura.io:
- https://ipfs.infura.io/ipfs/QmUJgcsYqwcbyGAECgN5Ybcof524d7kBKoLHEZtFonRC3i
- styles not used, text black on white bg.
On ipfs.io:
- https://ipfs.io/ipfs/QmUJgcsYqwcbyGAECgN5Ybcof524d7kBKoLHEZtFonRC3i/
- styles used, text white on black bg.
Hope it helps!
from ipfs-deploy.
@lidel ^ Do we collect "developer adoption blockers" like this anywhere? It seems like we'd want gateways and companion behavior to be standardized. Do we have a spec for expected behavior?
from ipfs-deploy.
@autonome I collect issues/bugs/caveats around HTTP semantics in ipfs/in-web-browsers#132, and want to use it as a seed to create "interop gateway tests" (ipfs/interop#76) that our and third party gateways could run to ensure they are compliant with "public gateway standard". (Not sure if its under maintenance or gateway-as-a-product. Something to discuss when planning OKRs for next quarter)
That being said, path /ipfs/style.css
produces error which is returned as text/plain
with nosniff
header, but it is not the main problem. It looks like a bug in your website.
Are you sure your assets are requested via explicitly relative paths?
Assuming your assets are inassets/
, it should look like
<link rel="stylesheet" href="./assets/main.css">
from ipfs-deploy.
@lidel on the example I linked below, the paths are explicitly relative, yes.
from ipfs-deploy.
Indeed, I see there are two things at play here, which muddies the waters:
- relative paths
- gateway at
ipfs.infura.io
addingX-Content-Type-Options: nosniff
to non-200 responses
@autonome I believe (2) should go away if (1) is solved – are you making HTML by hand, or generating it?
from ipfs-deploy.
I deployed my pet-shop using ipfs-deploy, here is the error:
invalid ipfs path: invalid path "/ipfs/pets.json": invalid CID: selected encoding not supported
https://ipfs.io/ipfs/QmT6SgXKChuzz9nCTu8ZNtc8y7wLR3DjvH3rsEkcreiSDG/
Any ideas?
from ipfs-deploy.
@wakqasahmed hey! You seem to be loading the file pets.json
from the wrong URL on js/app.js
.
from ipfs-deploy.
@hacdias may be my eyes are failing to see it, but can you explain how the following is wrong. I am loading ../pets.json
and not pets.json
Here is the IPFS explorer details:
http://localhost:5001/webui/#/explore/QmT6SgXKChuzz9nCTu8ZNtc8y7wLR3DjvH3rsEkcreiSDG
from ipfs-deploy.
Thank you @autonome!
- added slash in #92, should fix the problem at hand
- added a note about redirect and mandatory slash for directory URLs to placeholder issue about interop Tests for HTTP Gateway, so we remember to test for this when gw interop suite is created. I believe gateway spec should be created along with the test suite.
- filled a bug at infura
from ipfs-deploy.
Related Issues (20)
- Consider removing ipfs-http-client dependency
- Crash on xsel not available. HOT 3
- Consider not copying to the clipboard by default or remove such functionality
- Log output now printed to stdout. HOT 4
- Cloudflare DNS update keeps on adding TXT entries, doesn't override or remove old ones. HOT 6
- got error hash : dnslink=/ipfs/undefined HOT 3
- Get error path must be a directory HOT 7
- Feature request: keep only the latest N revision for a given name HOT 1
- How does this work? Does it assign a CID to the entire directory? HOT 2
- Error: Found inconsistency in pinned CIDs while uploading to both pinata and infura
- TypeError: terminated HOT 1
- 400 when updating Cloudflare dns-link if web3 gateway is enabled HOT 2
- Add support for the IPFS Pinning Service API HOT 1
- Deprecate IPFS Deploy HOT 6
- infura error: project id required HOT 3
- 🆘 Needs Maintainer HOT 2
- How using pinata API keys? HOT 5
- add support cloudflare web3 gateway HOT 1
- Emit CIDv1 instead of v0
- Broken in Node 18.13: "TypeError: RequestInit: duplex option is required when sending a body" HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ipfs-deploy.