HTML basic authentification in URL - html

I host my own website at home (using wamp) that uses basic authentification. The authentification worked well and username:password in the url worked too. But since last week, when I load url with username:password#url.com it doesn't work and it seems that the css /js data won´t load. I tried this with a bootstrap example site and it worked. So I guess the problem is my website.
Here is my website template, as you can see the CSS doesn´t work except when reloaded.
I don't have this problem at the bootstrap example site (Link)
I use Google Chrome Version 59.0.3071.115 on my computer and it doesn't work on my android phone too.
Edit : it seems that the problem come from the URL. Chrome try to load css with basic authentication in URL and it fail. I've got Provisional headers are shown for the css file.
Do you know why I've got this problem now and how to avoid it ?

I found somebody else with this problem :
Bypass blocking of subresource requests whose URLs contain embedded credentials
Apparently it's a new limitation of chrome :(

When going on your page, I get this warning :
[Deprecation] Subresource requests whose URLs contain embedded credentials (e.g. https://user:pass#host/) are blocked. See https://www.chromestatus.com/feature/5669008342777856 for more details.
What is happening there, is that you are doing requests to URLs like :
http://stack:123456#88.182.191.233:8090/[...]
So, since you are sending crenditentials il the URL, Chrome blocks it (returning a (blocked:origin) status)
Edit: By the way, you should never send credentials over URL, especially when you are using http only.

Related

Target URL scheme XXX is not allowed

I have an Adaptive Card entirely made in html which is sent by email using a windows console app. I receive the card very well, everything is find in it and the URL for the Action.Http is well formed and working as it is tested outside the card now when I click Send from the Adaptive Card in outlook DESKTOP or WEB it shows a message saying :
The URL scheme XXXX is not allowed.
the URL is very normal which is an MVC action I'm calling that looks like that :
http://localhost:52523/Controller/Action?With_a_phew_parameters
When I paste the url in the browser it works just find.
Any idea ?
URL must be accessible from the internet, you cannot use localhost.
read at https://learn.microsoft.com/en-us/outlook/actionable-messages/adaptive-card
I did set my MVC app to use https and changed the URL for https:// and the error was resolved

IFrame on Safari 11 behaving weirldy

In a very similar fashion with a related question, the web application I have creates an iFrame to a login form, with a certain URL and a bunch of GET parameters, but until the said URL is opened in a separate window at least once, the page loaded in the iFrame doesn't seem to be getting the GET parameters at all. This is not a PHP application, however, so there's no session_start issue as suggested in the answer to the related question.
I tried tracing the network with Charles, and the only outgoing request I see is a CONNECT request to the domain of the URL without any GET payload.
Not sure if related or important: the main page domain is HTTP, the login form is on HTTPS.
Is there some preflight voodoo that needs to be done for this to work?
The whole solution works as is on Safari 10 and other browsers, IE included.
The problem was with the Preferences -> Privacy -> Prevent cross-site tracking being set to on. When switched to off works like a charm.

Using Instagram API for simple web page

So I am working on a fairly simple project, basically a web page that should list the captions from a certain instagram account. It's all designed, it just needs to be lit up with the content. Have a look at http://evanshellborn.com/speechofthebeets/.
I found that you can see a json file containing all the necessary data at instagram.com/{username}/media. So in my case, https://www.instagram.com/beets_are_life/media/. So before I put that page actually online, I was on my local machine, and I did a JSON call to that page and it worked perfectly. So I built it all out and my web page loaded the captions just like I wanted it to.
Then I went to put it online, (http://evanshellborn.com/speechofthebeets), but it doesn't work. Have a look at the script at the bottom of it, on my localhost that code works and the captions get loaded. But on the live page, I get an access not allowed error in the console. So I think Instagram doesn't allow this sort of direct access anymore, you have to go through their API.
Now I've tried looking at the API but it seems rather confusing. Basically what I'm asking for is a different JSON url that would give me the same result as https://www.instagram.com/beets_are_life/media/, but that would work from the live page.
I think https://api.instagram.com/v1/users/{user-id}/?access_token=ACCESS-TOKEN would work, just replacing {user-id} with the appropraite user_id. But where do I get an access token?
From reading https://www.instagram.com/developer/authentication/, it looks like you get one when a user puts in their user credentials. But I don't want to have anyone log in, I just want a simple web page.
Hopefully that made sense. How can I do what I want?
Looks like the API url https://www.instagram.com/beets_are_life/media/ does not support jsonp (no callback support), so u cannot use javascript (client side) for making API request, it will fail because of Access-Control-Allow-Origin error on browser side, you have make this API call on server side as proxy.
I guess https://www.instagram.com/<USER_NAME>/media/ is not a publicly documented API, thats the reason it is not supporting jsonp, Instagram uses it for their website and since it is same-origin it will work for them on client-side
This link will help you embeding the instagram on a simple html webpage.
There is a button on the bottom of the post on instagram.when you click on the link a menu pops up. then click on embed
now a box pops up
just copy paste the html and you are done.
it will fetch the post for you

Failed to load resource under Chrome

There is a bunch of images in a web page.
Other browsers do download them correctly, but Chrome doesn't.
In the developer's console, it shows the following message for each image:
Failed to load resource
As mentioned before, problem appears only in Chrome.
What is it?
I recently ran into this problem and discovered that it was caused by the "Adblock" extension (my best guess is that it's because I had the words "banner" and "ad" in the filename).
As a quick test to see if that's your problem, start Chrome in incognito mode with extensions disabled (ctrl+shift+n) and see if your page works now. Note that by default all extensions will be already disabled in incognito mode unless you've specifically set them to run (via chrome://extensions).
Check the network tab to see if Chrome failed to download any resource file.
In case it helps anyone, I had this exact same problem and discovered that it was caused by the "Do Not Track Plus" Chrome Extension (version 2.0.8). When I disabled that extension, the image loaded without error.
There is also the option of turning off the cache for network resources. This might be best for developing environments.
Right-click chrome
Go to 'inspect element'
Look for the 'network' tab somewhere at the top. Click it.
Check the 'disable cache' checkbox.
Kabir's solution is correct. My image URL was
/images/ads/homepage/small-banners01.png,
and this was tripping up AdBlock. This wasn't a cross-domain issue for me, and it failed on both localhost and on the web.
I was using Chrome's network tab to debug and finding very confusing results for these specific images that failed to load. The first request would return no response (Status "(pending)"). Later down the line, there was a second request that listed the original URL and then "Redirect" as the Initiator. The redirect request headers were all for this identical short line of base64-encoded data, and each returned no response, although the status was "Successful":
GET data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg== HTTP/1.1
Later I noticed that these inline styles were added to all the image elements:
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
Finally, I did not receive any "failed to load resource" messages in the console, but rather this:
Port error: Could not establish connection. Receiving end does not exist.
If any of these things is happening to you, it probably has something to do with AdBlock. Turn it off and/or rename your image files.
Also, because of the inline CSS created by AdBlock, the layout of my promotions slider was being thrown off. While I was able to fix the layout issues with CSS before finding Kabir's solution, the CSS was somewhat unnecessary and affected the flexibility of the slider to handle images of multiple sizes.
I guess the lesson is: Be careful what you name your images. These images weren't malicious or annoying as much as they were alerting visitors to current promotions and specials in an unobtrusive way.
If the images are generated via an ASP Response.Write(), make sure you don't call Response.Close();. Chrome doesn't like it.
I was getting this error, only in Chrome (last version 24.0.1312.57 m), and only if the image was larger than the html img. I was using a php script to output the image like this:
header('Content-Length: '.strlen($data));
header("Content-type: image/{$ext}");
echo base64_decode($data);
I resolved it adding 1 to the lenght of the image:
header('Content-Length: '.strlen($data) + 1);
header("Content-type: image/{$ext}");
echo base64_decode($data);
Appears that Chrome dont expect the correct number of bytes.
Tested with sucess in Chrome and IE 9. Hope this help.
Facts:
I have disabled all plugins, and the problem still remains.
There are some sites, where the problem does not occour.
It's a known issue. See Issue 424599: Failed to load resource: net::ERR_CACHE_MISS error when opening DevTools on PHP pages and Stack Overflow question Bizarre Error in Chrome Developer Console - Failed to load resource: net::ERR_CACHE_MISS.
There is a temporary work around in Reenable (temporary) showModalDialog support in Chrome (for Windows) 37+.
Basically, create a new string in the registry at
HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome\EnableDeprecatedWebPlatformFeatures
Under the EnableDeprecatedWebPlatformFeatures key, create a string value with the name 1 and a value of ShowModalDialog_EffectiveUntil20150430. To verify that the policy is enabled, visit chrome://policy URL.
FYI - I had this issue as well and it turned out that my html listed the .jpg file with a .JPG in caps, but the file itself was lowercase .jpg. That rendered fine locally and using Codekit, but when it was pushed to the web it wouldn't load. Simply changing the file names to have a lowercase .jpg extension to match the html did the trick.
In Chrome (Canary) I unchecked "Appspector" extension. That cleared the error.
I updated my Chrome browser to the latest version and the issue was fixed.
It is due to ad-blocker.When project files names contains words like 'ad' then ad-blockers also block theses files to load.
Best solution is that never save any files with these name keys.
Removing the / from the path helped me to solve this problem.
See more at:
Failed to load resource: net::ERR_FILE_NOT_FOUND loading json.js

Setting Access-Control-Allow-Origin in Dreamhost possible?

Just wanted a confirmation for this: Firefox currently doesn't play well for picking custom fonts through a sub-domain via the font-face tag. Other browsers do this without any problems.
A little research showed up saying that i am required to set the Access-Control-Allow-Origin as is shown in the link here: http://pastie.org/653265
Essentially i have my blog at kaushikgopal.com/blog and i was trying to
access fonts that within this blog that are available at
font.kaushikgopal.com. I tried changing the same in my .htaccess file but couldn't resolve the issue.(I placed a .htaccess file within the font sub-domain folder and directly pasted code from the above pastie link).
I submitted a ticket to dreamhost asking for assistance and they were helpful in clearly stating "We do not support Access-Control-Allow-Origin on shared hosting servers".
So i didn't go the sub-domain route for fonts. But i'm a little curious, has anyone tried this (with a dreamhost hosting account would be helpful)? Just want to confirm what the tech-support guy suggested is accurate and there's no other way.
Thanks.
Another nice link clearly stating the problem :
http://www.stevesouders.com/tests/font-face/xdomain.php
I just tried and it does work (on Dreamhost). Eg, /mysite/pub/.htaccess:
header add Access-Control-Allow-Origin *
See http://42at.com/lab/Thumboard/bookmarklet.html. The bookmarklet does an ajax call to my domain, and with above access-control is able to grab html snippet.