I've been trying figure out how to get mp3 files in an Amazon S3 bucket paired with Cloudfront to allow me to stream the files directly on my site but not allow anyone to take the source URL of the mp3s by viewing the source code of the page and then sharing or leeching the link.
Right now, I am using an html5 mp3 playlist from mediaelements.js and the mp3 file is always in the source code. That's fine, but I want to only allow the mp3 to play on my specific website and if the link gets copied from the source and accessed in a different browser it should show an access restricted error.
I tired to update the cloudfront policy to expire within 30 seconds of the page load, but that will ultimately prevent the files from playing once the 30 seconds is over and if the user didn't play one of the tracks prior to that expiration.
Is there another way to do this without putting a time expiration on the cloudfront links?
I think this is what you are looking for: http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/private-content-signed-urls-overview.html
Basically you can vend URLs dynamically from your service, and CloudFront will validate signature. You can also set pretty short expiration time to avoid wide distribution of your URL, and restrict IP addresses that might access URL (see Custom Policies section in the referenced document).
It's possible with just few line wizard coding on back-end (private method) ,i prefer to using free tier EC2 instance and configure environment for handle streamable contents for deliver everything clear this way provide a restrict page to someone going to leech or using IDM for donwload your mp3 files.
Example : Grooveshark.com
However still there is some another methods like Owain answer .
Unfortunately, you can't. MediaElements.js may be hosted on your site, but it's being run on the user's computer. So although it looks like they are playing an MP3 via your site, they are actually just downloading a URL from your site and playing it using code running on their computer.
You could write server-side code that went off to S3 and retrieved the MP3 before returning it as if it were a file hosted on your server, but that still wouldn't limit people from copying that link, unless some sort of session were used before returning the file to ensure they're logged in via your site.
But that would mean you can't make use of CloudFront. That's the compromise. Distribute your MP3 via a CDN and improve download performance by hosting the file in an edge location closer to your users, or take advantage of server-side security to ensure your IP isn't hosted by unscrupulous third parties.
Related
I am in developer mode in the .region file trying to add a background video with the video tag. I put the mp4 file into the template folder and I have been trying to access it through src="video.mp4" and display the video. It doesn't display the video and I am not sure why I can't grab it. When i change the source to any http// video online it works so its not the code. It only doesn't display the video when I try grabbing it from the local folder. Any leads or help would be appreciated. Thank you!
Files that are directly located in the /template folder are not intended to be accessible via http. Instead, put the file within /template/assets and then reference the file as /assets/video.mp4.
If that doesn't help, ensure that the file is even accessible via http by entering http://yoursite.squarespace.com/assets/video.mp4 in the address bar (using your site's correct URL). If you can access the video file, then it will work as a src attribute of a video element. If you cannot access it, then something else is going on: either you haven't uploaded the file or the file name is incorrect.
Another tip: if using the full URL for a file (as opposed to the relative URL), try using https for the protocol in place of http. The correct protocol depends on your site's settings, of course, and whether you are using your built-in or custom domain.
If using the local development server via Node.js (as opposed to the live server, that is, your actual Squarespace site), try pushing/uploading the files to the live server on Squarespace (via Git or SFTP) and then retesting locally. I've found that sometimes this may be required due to caching in the local environment. This will also reveal whether the file you are uploading is too large (the documentation does claim a 1MB limit which may be true, though it may be as large as 5MB or 20MB if the docs are out of date; I cannot recall whether this has changed).
If the file is too large for the /assets folder, then your only other option besides hosting it via a different service entirely is to use the file storage via the Squarespace Config UI, which allows up to 20MB, and referencing your video via that path. You'd have to get the video down to 20MB by shortening, scaling or further compressing it.
If hosting the file via a different service, Cloudinary may be worth considering; a free account may allow up to a 100MB video file and enough bandwidth (assuming your website's traffic is relatively low).
I have an HTML based project that works with media from other websites, which embeds images / songs / videos using their direct links. The system works perfectly so far, but I wish to make a change: As a lot of assets are accessed repeatedly by viewers, it would seem more optimal to cache them in a controlled way, so whenever certain media pops up you don't need to fetch it from the origin server each time. I never did this before so I don't know if and how it can be done.
To use an oversimplification: I have an embedded photo called "image.png" inside an image element, which will show up whenever I open the site. Currently it's simply defined as:
<img scr="https://foo.bar/image.png">
Works perfectly! However I want to make sure that when my site is accessed, you don't need to fetch that image from foo.bar each time: You will keep it in a local directory after downloading it once, from which the script can fetch and work with the file independently. For Firefox for instance, this subdirectory would be inside your ~/.mozilla/firefox/my_profile directory. Ideally it can be defined using a fixed name, so no matter which URL the website is opened from it uses the same cache path instead of each mirror of the project generating its own.
First, my script must tell the browser to download https://foo.bar/image.png and store it into this cache subdirectory. After that, it would need to generate a link to embed it directly from that subdirectory, so the URL I use would now be something of the following form:
<img scr="file://path_to_cache/image.png">
How do I do those two things, in a way that's compatible across popular web browsers? As a bonus, it would be useful to know if I can limit the size of this cache directory, so once it reaches say 100 MB the oldest items will be removed to stay under that size.
You could alternately add caching to your server's .htaccess file.
This site explains how: https://www.siteground.com/kb/leverage-browser-caching/
However this does not cache the image on the user's machine, it is cached on the server for quicker response.
You could use service workers to cache images on the user's machine.
https://developers.google.com/web/ilt/pwa/lab-caching-files-with-service-worker
Hope this helps.
As the title indicates i want to have a certain application get access to the local file system. To describe why i will illustrate my situation:
I am a running a IIS WebApplication with the C# MVC 4 Framework as backend module. The site solely consists of HTML, CSS markup and some JS. The page will be loaded in IE11+ (Edge) only. For the standard procedure of displaying and accessing data from as well as sending data to the server this works quite fine.
On a certain page I want the user to be able to upload a file using a simple file dialog, like the one you can initiate with a simple <input type="file"> tag. I also want to offer the posibility to download files from the server but need to know where files has been saved / will be saved to.
As described on a lot of different websites, just like this one here, the HTML5 File API does a great job but will not be able to return the full qualified filename including the local path directions, same for JS accessing the file object.
As my research confirmed HTML5, JS and also SWF (Flash) will not report detailed information because they are all sandboxed applications or restricted by RFCs. I already unterstood and appreciate the effort to secure my trips to internet.
But in this case do need the paths where a file was upload from and the file has been downloaded to.
So my question is, what is the best way to expose the full path directions for a up- as well as downloaded file to report them back to the server?
Is it possible to embed a SWF object inside HTML which will run inside an Adobe AIR sandbox or is a signed JAVA Applet still the one and only solution to accomblish this security breaking task?
A solution i would also apreciate would be the possiblity to ask the user to get access the file system, like you grant access to the web push service to receive notifications.
Also if there is a possible solution which may suite my circumstances please let me know by adding some simeple examples / revealing some factful links, thanks in advance.
I am currently experimenting with the google-castable-video component of the Google Web Components of the Polymer library. So far no larger issues. But when I try to stream a video, which has a blob-url as source, the stream on the Chromecast starts buffering, but immediatly stops without showing a frame.
Now i am asking myself, if it is even possible to use an url like blob:http%3A//127.0.0.1%3A8889/fd3e3425-f5ea-48f1-a380-5febf0f071ad with the Chromecast-SDK. If not, are there any alternative ways to load a local video and stream that with this Web-Component? (Excluding existing tools like Videostream, etc.)
Any help appreciated.
The URL you have provided is pointing to the local loopback so when chromecast receives that, it tries to load that from its own local device and clearly that is not what you want. If you want to serve local content from your sender side, you need to embed a local web server in your sender and serve content using that web server; you can search on StackOverflow for prior posts on serving local content to chromecast.
I'm developing a web app that needs some sort of filesystem access. Ideally I'd want to be able to "Open..." a file into the app and then "Save" the file back to local filesystem at the location that the user opened it from.
Currently, we use a java applet to achieve this functionality, but since java is going out of style, we're needing to do this with javascript and html5.
Obviously, this can't be done because of security reasons built into browsers, so I'm trying to somewhat emulate it.
I'm using the html5 file api to successfully import/open the files, so that's half the battle. The hard part is getting the saving feature. I'm getting close using an iframe and content-disposition, but problems arise when browsers are set to automatically download the files to a downloads folder... users may get confused and be unable to locate the file they just downloaded.
So, my question is this: is there some sort of onSave event or some kind of way for the browser's "Save As..." window to return at least the filename that the user saved the file under?
Also, I've looked into the filesystem/fileWriter html5 apis, but from my understanding they're limited to only a sandboxed area of the local filesystem and only available in chrome dev releases.
Any help would be appreciated!
No, there is no way to do that with pure JavaScript. You can manage to trigger a download with data URIs or an iframe with some headers but you can't circumvent the browsers' download managers.
You can either use a Flash or Java applet to handle the saving for you, or ask the user to right click on the link and do save as, then he might be able to choose the destination.
One popular option using Flash is Downloadify.