I made website to add custom thumbnail images to projects: https://snap-thumb.glitch.me/
thumbnails can be any format (at least of what I tried) like PNG, GIF, SVG
SVG thumbnail example:
Eh?
I don't understand your question.
Is that screenshot of part of iframe?
And where you get animated SVG from?
How did you make that?
SVGs are text files and support CSS animation
here is source code of that SVG:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120" width="160" height="120">
<style>
text{
font-family:cursive;
font-weight:bold;
font-size:20px;
transform-origin:center;
animation-name:r;
animation-duration:2s;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
@keyframes r{
0%{
transform:rotate(0turn);
fill:#F00;
}
25%{
fill:#0F0;
}
50%{
fill:#00F;
}
100%{
transform:rotate(1turn);
fill:#F00;
}
}
</style>
<text x="80" y="60" text-anchor="middle">THUMBNAIL</text>
</svg>
Yes. I was wondering how it came to be logged in as me, but I guess it shows whatever username you've logged in with on that computer, so it doesn't say "bh" for other people.
..its an iframe of the snap website, its gonna show your username
Cool! Cant wait to try this out at home
So cool
I'm just worried about the security, because someone malicious could use pretty much the same code to connect to snap, and then be able to do bad things, such as, steal passwords.
Don't get me wrong, I love this site, I'm just worried about how you were able to do this, especially in another tab. I'd be fine if it were a browser extension.
I think anyone can do that on any site, overlaying an iframe with a completely transparent window to capture clicks. That's one reason you need NoScript, which catches such things. :~)
It's not an iframe, it's opening snap in a new tab. I even checked inspect element, and there was no iframe.
Fine, I'm just saying, anyone can make the same security hole by starting Snap! (or your bank's web site) in an iframe.
This is really cool:)
that is true.
You cant run javascript in an iframe from a different site for security reasons (such as you said)
@ego-lay_atman-bay
EDIT: huh, copy to highlight isn't working for some reason
EDIT 2: it says "Calling a parent JS function from iframe is possible, but only when both the parent and the page loaded in the iframe are from same domain i.e. xxx.com , and both are using same protocol i.e. both are either on http:// or https://."
After looking in the javascript of the site, I've now found that it's not an iframe, but a window, that is also in a different tab. Here's the code I found.
const update_log=(()=>{
const log=document.createElement('h2'),body=document.body
log.setAttribute('class','pulse')
body.appendChild(log)
return (new_content,is_error)=>{
body.removeChild(log)
if(is_error){
log.style.setProperty('--pca','#F00')
log.style.setProperty('--pcb','#FDD')
}else{
log.style.setProperty('--pca','#0F0')
log.style.setProperty('--pcb','#DFD')
}
log.textContent=new_content
body.appendChild(log)
}
})(),g=document.getElementById.bind(document),inject_url=url=>{
postMessage.call(snapwin,{
'params':[
'{const ru="".valueOf.bind(arguments[1]);Object.defineProperty(Project.prototype,"thumbnail",{"configurable":true,"enumerable":true,"get"(){return this._$thumb;},"set"(c){if(this._$thumb=c)c.toDataURL=ru;}});postMessage.call(opener,"injected thumbnail!","*");throw{"toString"(){throw "injected thmubnail, throwing to prevent onmessage cycle";}};}',
url
],
'selector':'evaluateString'
},'https://snap.berkeley.edu')
}
let snapwin=null
g('open').addEventListener('click',()=>{
try{
snapwin=window.open('https://snap.berkeley.edu/snap/snap.html','_blank','')
}catch(err){
snapwin=null
update_log(err,true)
return
}
if(snapwin){
update_log('opened snap',false)
}else{
update_log('window.open returned '+snapwin,true)
}
})
g('inject').addEventListener('click',()=>{
try{
if(!snapwin){
update_log('no snap window',true)
return
}
if(snapwin.closed){
update_log('snap window is closed (check #1)',true)
return
}
const img=g('img')
if(img.type==='file'){
const file=img.files.item(0)
if(!file){
update_log('no file',true)
return
}
const fl=new FileReader()
fl.addEventListener('error',()=>{
update_log(fl.error,true)
})
fl.addEventListener('abort',()=>{
update_log('FileReader aborted',true)
})
fl.addEventListener('load',()=>{
try{
if(snapwin.closed){
update_log('snap window is closed (check #2)',true)
return
}
inject_url(fl.result)
}catch(err){
update_log(err,true)
}
})
fl.readAsDataURL(file)
}else inject_url(img.value)
}catch(err){
update_log(err,true)
}
})
window.addEventListener("message",event=>{
if(event.source===snapwin&&event.origin==='https://snap.berkeley.edu'&&event.data==='injected thumbnail!')update_log('injected thumbnail!',false)
})
specifically this part
g('open').addEventListener('click',()=>{
try{
snapwin=window.open('https://snap.berkeley.edu/snap/snap.html','_blank','')
}catch(err){
snapwin=null
update_log(err,true)
return
}
if(snapwin){
update_log('opened snap',false)
}else{
update_log('window.open returned '+snapwin,true)
}
})
g('inject').addEventListener('click',()=>{
try{
if(!snapwin){
update_log('no snap window',true)
return
}
if(snapwin.closed){
update_log('snap window is closed (check #1)',true)
return
}
It opens the tab in a "window", and stores it in a variable. From there, it can modify the page.
I feel a bit better that this isn't a security issue with snap, but is an issue in the browser.
aha, so that's how it works.
unfortunately, this does lead to issues
such as users browsing the internet getting their information taken by heartless hackers
even worse, someone can pay money to create an ad on google to mislead people
nevertheless its a neat and clever hack
I agree with you. It's pretty cool, but also makes me not want to click on any buttons that open links.