I’m not too studied-up on CORS, but I know what it’s there for. Currently there’s a number of things that are not possible to do because our generator is on a different subdomain than other generators or iframes, etc. etc. and even the top-level page we’re actually on.
With that allowed (I think CORS can allow this), there’s a lot more customisation we can do of things like t2i image iframes and gallery iframes, reading/changing the top-level url, etc. Maybe that’s something you don’t want to allow, but I for one have wanted to do these things for completely benign legit reasons multiple times.
To help me understand, can you give an example of what you’re trying to achieve? Note there’s perchance.org/super-fetch-plugin which can bypass CORS if you’re just trying to fetch a cross-origin resource that doesn’t have the appropriate CORS headers.
Stuff like reaching into an iframe and messing about with it. I want to remove the gallery buttons in my plugin pages for example. While yes, you could add that feature, I could do it fairly easily myself I think–if cross-subdomain access was allowed.
Also, an image generator I’m working on takes in url parameters. I wanted to be able to clear them after processing using history.pushState, but as that would reach across into the main perchance.org domain it’s disallowed.
I’m not 100% sure it’s CORS that would allow this, but I’m sure there’s some way of telling the browser it’s cool.
- I want to remove the gallery buttons in my plugin pages for example
- that would reach across into the main perchance.org domain it’s disallowed
Allowing general-purpose cross-domain access like this is not possible, since it would allow very easy login credential stealing, and stuff like that, but these particular things that you’ve mentioned are good suggestions.
RE gallery button: You’re talking about the “send to gallery” and the “open gallery” buttons in the menu after clicking the heart button, right? Would something like this work?
promptData prompt = ... hideGalleryButtons = trueI have needed
history.replaceStatebefore myself, but haven’t gotten around to properly thinking about it. I think it should be fine to allow a generator to change the query parameters and hash (i.e. everything other than the pathname - since otherwise could ‘spoof’ other generators/pages). Can you let me know your specific use case to help me triangulate on a good approach here? Do you specifically need pushState? Or will replaceState do? I’m reluctant to add pushState because it can be used ~maliciously - like the spammy sites that effectively hijack your back button to prevent you from leaving the page (or at least, make it require an extra click or two).Ah yeah, I thought there’d be other repercussions. Maybe just somehow injecting in certain object so they can work? Or something? Yeah, only allow changing hash and params. That should be fine.
Assuming replaceState is just changing the current entry in history, yeah that’s totally fine. But as it’s going to be different to that in some ways anyway, you could build in your own property with getter/setter perhaps. Like…
get params() { return { param1: value1, ...}; }, set params(value) { history.replaceState() ... }, get hash() { return top.location.hash; } set hash(value) { top.location.hash = value; }May require messages or whatever.
We can currently read hash, but set it only on our own iframe. And we can read params, but with potentially other added stuff like for the preview iframe.
What I’ve done for now is, when the user clicks a button it clicks a hidden link which is then (presumably) caught by perchance, and changes the top-level page.
Speaking of which, by the way… it seems going to perchance.org/generator#anchor works. But if you click a link within the generator going to #anchor it loads up /welcome#anchor instead? At the moment I’ve got some code that catches and handles clicks on such links so it just scrolls there correctly. But just a heads up, as it seems some of this stuff is implemented and working, but not fully and not all aspects.
Thanks!
-
I’ve hackily fixed
<a href="#foo">foo</a>clicks so they work properly now. -
I’ve also added a fix so if you visit perchance.org/whatever#foo it’ll correctly try to scroll to the
id="foo"element if it exists: https://perchance.org/dkp9npcidc#foo - pinging @[email protected] -
You can also type a hash into the address bar of an already loaded page and press enter, and it’ll scroll to the element, like a normal top-level page does.
-
I’ve also fixed
history.replaceStateso you can now change the query string of the top-level frame as shown below. It’ll throw an error if you try to change the pathname, since that could allow for malicious ‘spoofing’ of other generators as mentioned above.
history.replaceState({}, "", `/${generatorName}?foo=1`)- You can change the hash with
window.location.hash = "#foo"(you can also do this withreplaceStateIIUC). - You can change page/tab title with
document.title = "foo";and it’ll propagate to the top-level frame. - You can change the favicon like you usually would (add a
<link rel="icon" href="https://exampe.com/image.png">to<head>) and it’ll propagate to the top-level frame.
Let me know if you find any bugs 👍
And I’ve added a
hideGalleryButtonsto the text to image plugin.I’ve now updated my hash-links-plugin to not do anything ;p
Great stuff–I’ll check those all out tomorrow and come back with an update 👍
New bug: the code expects there to be a href attribute on every
<a>tag. There may not be, at which point it breaks.deleted by creator
- 👍 :target works too!
- 👍 And it updates from using it in the editor without actually booting you out of the editor, which is a nice touch as well!
- 👍
- 👍 And you can call just “?params” too in the regular method, which works in perchance as well. Maybe you could only allow that. Make sure it only starts with “?” or something. A note about the error it gives you when it’s a disallowed path… not being able to see the path it’s received is a bit annoying. When I throw, I like to give as much info as I can about the thing I’m throwing about, so they don’t have go and start logging things out or breakpointing just to understand the reason it threw. (Wait–
generatorNameis a thing?! I’ll make use of that for one of my private plugins 👍 Should I scour the windows object for such hidden gems??) - 👍 I can also replaceState with “#hash”. 👍 And doesn’t scroll, though the normal method doesn’t scroll so that’s okay.
- The
:targetdoesn’t change though, when it does for the normal method. - And if you do this from the editor preview, it does add all the params from the preview iframe. Which… is probably okay, fine by me. Presumably those won’t show up unless you’re in the editor anyway.
- Worth people noting, clicking a link to #edit does not go to edit mode, neither does setting .hash, or doing it with replaceState. Also fine.
- The
- 👍
- Gallery buttons setting 👍 I’M SO HAPPY! :D
Test page I used for trying all these out: https://perchance.org/testing-features-19-aug-24-498573958#edit
:target
What’s this?
not being able to see the path it’s received is a bit annoying
Fixed, thanks!
Should I scour the windows object for such hidden gems
Nope, just https://perchance.org/advanced-tutorial - and if you find something that you want to use, but isn’t documented there, please let me know
:targetis a css pseudo-selector. So you could puta:target { color:red; }, and then links will be red if they have the id of the #hash. Lets you visually change elements when they’re the one being linked to.Ah, admittedly I did sorta skim that doc; I’d read so much stuff that day from everywhere else 😅
Bug: if it’s just in a code block and immediately happens, setting
document.titleis later overridden by. Ideallywould happen first, and then anydocument.titlestuff elsewhere–so that it takes precedence.Hmm. If it’s during page load, then I think I should encourage people to use
for that, since that’s what search engines will see. I.e. it might be misleading if, during page load,document.titletakes precedence, but then later they see that search engine’s aren’t using that. (Note that some search engines will run the full JS/iframe for certain popular pages, so they would seedocument.title, but it’s not guaranteed)It’s just a temp thing for me; I add “DEV” at the front so I can see at a glance which copy I’m working on. And I still manage it, but I have to use a setTimeout, so… it’s not like it really prevents it anyhow. And a regular web page would accept this just fine without such a workaround.
I would think the only time people ever use
document.titlein or out of perchance is to have a dynamic title based on stuff happening on the page–otherwise why script it at all? So it’s always done when the coder wants it to be different to the normal title, when they want to override it, ignoring anything else.So… dunno, my take is, it should just work the same as it does anywhere else. It’s cool that $meta.title does what it does, but it should be easily overridable I reckon. If nothing else, to keep parity with expectations for web pages in general.
I guess that’s kind of my angle on a lot of this stuff, maybe you noticed… coming from a web-dev background and working just in raw html/css/js files for a while, I’m all about keeping it working as close to that as possible and avoid unexpected side-effects or differences. Doesn’t mean you have to take that stance, but that’s mine anyhow 😁
Bug: if a #hash is set in the address, Auto will scroll to that instead of leaving the scroll where it is. Perhaps you’re re-handling the hash after auto-partial-load, but I think could be skipped. I think refreshing on a regular web page won’t re-scroll to the hash target.
Thanks! Fixed.
👍
-
deleted by creator
Just so you know, iframes are pretty much how all of perchance works. So yeah… they’re fine with iframes 😅
As for CORS and such, yeah I’m not completely up to speed with it either. Just handing it over to the dev who’s in here too, to figure out how they want to handle such things, if at all. We’ve been discussing various methods without CORS that would still expand the capabilities to do interesting/useful (but safe) stuff.