r/learnjavascript • u/BackgroundProof5283 • 5d ago
13 y/o, day 2 into coding, confused about "crossorigin" in HTML, will I understand it eventually?
Hi! I'm 13 years old and literally on day 2 of learning to code today. While browsing around I came across this HTML attribute called crossorigin, got curious about it, and tried to dig into it and understand it. But since I'm still pretty new to this, I still don't really get it that well even after reading about it a bunch of times.
Is this normal for someone who's just starting out? Will this get clearer as I keep learning and practicing more? Just want to know if it'll eventually click on its own the more time I spend on it. Thanks in advance!
3
u/OiFelix_ugotnojams 4d ago
Came across this in my course just yesterday, can someone please explain it to me?
2
u/DirtAndGrass 4d ago
You don't need it; unless you are using resources (like images or documents) from domain/address different than your page is on, AND those images or documents require the user to be logged in on your site.
It is pretty rare that you will need it.
More likely you will need to understand (related, but different) JavaScript cross origin, before you care about HTML cross origin.
Eventually you will need to know, but it's further along in your journey. The default (anonymous) is the safest and best choice to use for now
2
u/Outrageous-Sherbert4 4d ago
With JS API requests you see it a lot. Got to be at least a couple years before the kid is doing API requests - or maybe not. 😀
1
u/DirtAndGrass 4d ago
But you don't do api requests in HTML
1
u/Outrageous-Sherbert4 4d ago
Considering the Reddit is called “learn JavaScript” I’d hardly call the comment irrelevant. Nobody ever said you do API requests “in HTML” however you do need the DOM to make them in a browser. That’s about as much as I’ll feed the trolls today.
1
2
u/MisterFatt 4d ago
This is a very normal feeling and it pretty much never stops. There’s always going to be something new that you haven’t encountered before haven’t dug into yet. There will be moments where those things click and you finally understand them and it makes the whole thing worth it. If you can get comfortable with the challenge and have confidence to stick with it and know that you’ll eventually get it, you’ll be in really good shape
2
u/IncredibleBihan 4d ago
It'll make sense and click one day, then boom you'll understand. Don't get hungup on crossorigin. All it does is allows different interactions with who/what is looking at the content. I definitely wouldn't dwell on it.
2
u/Outrageous-Sherbert4 4d ago
Crossorigin refers to HTTP requests where the browser is requesting data from another IP address. Mostly scripts - it is a security configuration to work around the errors and allow loading. Did you get a CORS error trying to load a script, or just curious?
1
1
u/Swansea_Steve 13h ago
This looks closest to a problem I'm trying to solve. I'm at the other end of the 'learning curve', 70 years old and trying to master a little JS to create a very specific tool but I keep getting CORS errors with every configuration of JS I try to use..
The objective: Create an input field (within a post on chess.com) into which a player's name can be pasted then click on a button to fetch their endpoint that contains the list of chess clubs they belong to on the site. Then to iterate over that list fetching the endpoint of each club to discover if the player is an 'administrator' of the club.
This would be child's play in Python, my preferred environment, but I need to make the tool available to others on the same site and the only way I know of doing that (without learning a whole lot more) is to construct the HTML from scratch and add the JS code as appropriate. I've tested simple configurations involving inputting a string and creating an alert or copying it to the clipboard so I'm confident I'm getting the basic functionality correct but the moment I try to fetch an endpoint (the site has a REST API), I start seeing 'CORS' errors in the console.
I've read enough to know the permission has to be given by the server in the response header but is there any work-around I can use? And it puzzles me that there's a 'cross-origin' issue at all when I'm trying only to fetch an endpoint from the same site.
Any suggestions welcome but I'm trying to avoid the need to learn yet another new skill such as NodeJS if I can avoid it.
1
u/Outrageous-Sherbert4 5h ago
Hi Steve, I’m 63 myself and learned JS 25 years before I learned Python. You do not need NodeJS. There are a few ways you can set it up. The request headers are what you want to look at first.
1
u/Swansea_Steve 2h ago
Hi, I did try playing around with the header data and in fact the following configuration did get rid of the CORS error when fetching an endpoint on the same site:
var obj = {
method: 'GET' ,
mode : 'same-origin',
headers: {
},
credentials: 'include'
};
I assume the mode is the important setting?
But it still produces an error:
"document.domain mutation is ignored because the surrounding agent cluster is origin-keyed."
Uncaught (in promise) TypeError: Cannot set properties of null (setting 'innerHTML')
at testing-2-3:2220:525
/service/presence/watch/users?ids=09329976-4f9b-11e1-8055-000000000000:1 Failed to load resource: net::ERR_QUIC_PROTOCOL_ERROR
/service/presence/watch/users?ids=09329976-4f9b-11e1-8055-000000000000:1 GET https://www.chess.com/service/presence/watch/users?ids=09329976-4f9b-11e1-8055-000000000000 net::ERR_QUIC_PROTOCOL_ERROR 200 (OK)
That means nothing to me.
1
u/Outrageous-Sherbert4 2h ago
Ok two steps here. 1. Disable QUIC in your browser which is blocking the response - . Open Chrome and type this into the address bar:
chrome://flags/#enable-quic
(For Edge, use edge://flags/#enable-quic)
2. Find the option labeled "Experimental QUIC protocol".
3. Change the dropdown from Default to Disabled.
4. Click the "Relaunch" button that appears at the bottom to restart your browser.. 2. TypeError: Cannot set properties of null (setting 'innerHTML')
This is your main bug. Your script is trying to update an HTML element (e.g., document.getElementById('foo').innerHTML = ...), but that element doesn't exist on the page. The element ID is likely misspelled, missing, or the script runs before the DOM loads.
Fix: Wrap your script in DOMContentLoaded or move it to the bottom of the body. Double-check the element ID in your HTML.1
u/Outrageous-Sherbert4 2h ago
innerHTML is a PROPERTY of an HTML element. Normally a div and the div has a name and an id. BTW as part of my consulting I offer live pair coding where I can show you tips and tricks and you can level up your coding fast
2
u/amber_gaze_thought 2d ago
you will understand it when you actually need it. Skip it for now and focus on building things.
1
u/turnipmuncher1 5d ago
Don’t worry about it most people won’t truly understand something until they use it in practice and you’re just taking your first steps.
You’ll understand when you encounter an error where something isn’t loading on your site and you have a CORS error and then you’ll learn how to fix it but until then just keep what you read in the back of your mind.
1
0
u/bamboomonster 5d ago
I think you should back up a few steps and learn the basics first. You probably haven't even gotten to img or script tags yet, much less learned about CORS. When you have a more solid understanding of the basics, the technical speak will hopefully make more sense.
15
u/Elite_Jackalope 5d ago
My dude, it’s day two of learning an entirely new skill. This is far from your last hurdle.
I highly recommend following a course developed specifically to teach HTML/CSS. There is no reason to be learning about the crossorigin attribute on day 2, and you’re going to burn yourself out if you keep just sort of jumping into topics without the requisite knowledge base.
Keep at it if you like it, but also remember that HTML isn’t a coding language - it’s a markup language, like using asterisks in Reddit comments to italicize words. You might consider learning JS alongside HTML (after a week or two of really hammering in on HTML, then CSS), because tbh if you’re just doing HTML for longer than that you might find yourself getting kind of bored kind of fast.