ASP.net MVC favicon doesn't show up - asp.net-mvc

I need some help with showing the favicon on my site while using ASP.NET MVC.
The problem in short is that whenever a request is made for
http://example.com/favicon.ico OR
http://example.com/Content/favicon.ico
the request never gets served. Firefox says :
Content Encoding Error - The page you
are trying to view cannot be shown
because it uses an invalid or
unsupported form of compression.
I have tried ignoring the route using the following ignore route strategies, obviously not all at the same time ;-)
routes.Add(new Route("favicon.ico", new StopRoutingHandler()));
routes.IgnoreRoute("{*favicon}", new { favicon = #"(.*/)?favicon.ico(/.*)?" });
routes.IgnoreRoute("Content/{file}", new { file = #".*" });
I can confirm that it is ignoring the route because I subclassed the controller factory and it does not call CreateController
The kicker is this, I also have a png version of the file and it does get served. I have also checked it with fiddler and whenever I try to request the ico directly through url I get a pop-up that says something like this:
The magic number in GZip header is not
correct. Make sure you are passing in
a GZip stream.
So it seems that somehow IIS is trying to send it back compressed?
How do I stop this behavior/make it work?
Any insights?
UPDATE:
I figured it out, the web.config had a custom httpmodule that dealt with serving physical files and it was trying to compress the file output. That doesn't work when you have image files. :-)

Why are you adding it as a route??
Just add this to your master page header:
<link rel="shortcut icon" media="all" type="image/x-icon" href="<%= Url.Content("~/favicon.ico") %>" />

Related

How to display rails app's page inside another page of this app with iframe?

I have to display my page, which is the part of my app, on this app's another page inside an iframe
E.g. I have /customers page and /invoices page (both actions are #index). /invoices page has iframe with src='http://localhost:3000/customers'.
How to make it work correctly (also in production, means example.com/invoices has to display example.com/customer inside an iframe)?
I've already tried other solutions from StackOverflow:
response.headers.delete('X-Frame-Options') inside CustomerController#index (and before_action & after_action too)
set config.action_dispatch.default_headers = { 'X-Frame-Options' => 'ALLOWALL' }
delete headers on ApplicationController level as in CustomerController
Set response.headers['X-Frame-Options'] = 'ALLOWALL'
But nothing works. Each time I get localhost refused to connect. in Chrome and Firefox Can’t Open This Page in Firefox.
It also doesn't work with relative path, such as iframe src='/customers'
I find the solution in HTTP headers.
Checked out Content-Security-Policy header and in was set to none in config/initializers/secure_headers.rb
So the problem solution is in setting up frame_ancestors: %w['self']
SecureHeaders::Configuration.default do |config|
config.csp = {
...
frame_ancestors: %w['self'], # Replaced from frame_ancestors: %w['none'],
...
}
end
And checkout HTTP headers, that Content-Security-Policy header contains frame-ancestors 'self';
It works in dev such as in production

angular2 & lite server dot in url leads to 404 not found

I'm using Angular2 Beta 14 and calling a URL with a "dot" in it leads to a 404 not found error from the lite server which is 2.2.0.
This is the URL I'm calling:
http://localhost:3000/confirmuser/token/eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjYsInVzZXJOYW1lIjoiYXNkZmFzQGNlZC5saSJ9.PMzNWp8mbUKbSAiOqhOqjhZUYNejXY3pIQueBkc8_2E
The router path in app.component.ts looks like this:
{path: '/confirmuser/token/:token', name: 'ConfirmUser', component: ConfirmUserComponent}
The Chrome console shows this:
Failed to load resource: the server responded with a status of 404 (Not Found)
Ant the Lite Server:
[1] 16.04.13 15:57:13 404 GET /confirmuser/token/eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjYsInVzZXJOYW1lIjoiYXNkZmFzQGNlZC5saSJ9.PMzNWp8mbUKbSAiOqhOqjhZUYNejXY3pIQueBkc8_2E
When ever I call the url without a "dot", the page gets loaded correctly.
My aim here is, to confirm a user sign up. He receives an email with an URL he has to confirm. Using a JWT in this (and other cases) is habit I've been using.
Now I doubt this is an Angular issue, I believe this is a lite server issue.
Anyone experience with this?
Thanks
I found a suitable workaround for this issue.
Basically I'm getting rid of the path parameter ":token" and replacing it by a query parameter
In the app.component.ts the new path now looks like this:
{path: '/confirmuser', name: 'ConfirmUser', component: ConfirmUserComponent}
An the URL like this:
http://localhost:3000/confirmuser?token=eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjYsInVzZXJOYW1lIjoiYXNkZmFzQGNlZC5saSJ9.PMzNWp8mbUKbSAiOqhOqjhZUYNejXY3pIQueBkc8_2E
In the component that handles this request I can continue to call route params as I was used to. So nothing to change there:
constructor(params: RouteParams){
this.token = params.get('token')
...
This question has been answered in https://stackoverflow.com/a/36283859/1465640#
But it can be summarized with dots doesn't work in urls unless you do some work on the lite-server config.
If you are using webpack then you need to change the config to make it working.
Please make the change in webpack dev server config file
historyApiFallback: {
disableDotRule: true
},

getting oEmbed to work on my non-WordPress (static) website

I have a test page setup with several "oembed"-style links in different formats because I was trying to see what worked:
http://dev2.ohlone.edu/people/clambert/testoembed.html
None of them work. I have searched and searched Google and found nothing to indicate that I have to include a javascript file or anything else on the HTML page.
The server is running Apache on MS Windows Server. I do not manage the server and am unfamiliar with its setup.
This is a static web page - i.e., not generated using WordPress or any other CMS.
What am I missing?
Thank you,
-Cheryl Lambert
Web Designer, Ohlone College
You have added links to oembed provider links in your html. To unfurl it and make visible the content in your html all you have to do is
Invoke oEmbed api which you have added as a XML http request
you should do some thing like this
Then you could get response something like this
<oembed>
<type>photo</type>
<flickr_type>photo</flickr_type>
<title>Bacon Lollys</title>
<author_name>‮‭‬bees‬</author_name>
<author_url>https://www.flickr.com/photos/bees/</author_url>
<width>1024</width>
<height>768</height>
<url>
https://farm4.staticflickr.com/3040/2362225867_4a87ab8baf_b.jpg
</url>
<web_page>https://www.flickr.com/photos/bees/2362225867/</web_page>
<thumbnail_url>
https://farm4.staticflickr.com/3040/2362225867_4a87ab8baf_q.jpg
</thumbnail_url>
<thumbnail_width>150</thumbnail_width>
<thumbnail_height>150</thumbnail_height>
<web_page_short_url>https://flic.kr/p/4AK2sc</web_page_short_url>
<license>All Rights Reserved</license>
<license_id>0</license_id>
<html>
<a data-flickr-embed="true" href="https://www.flickr.com/photos/bees/2362225867/" title="Bacon Lollys by ‮‭‬bees‬, on Flickr"><img src="https://farm4.staticflickr.com/3040/2362225867_4a87ab8baf_b.jpg" width="1024" height="768" alt="Bacon Lollys"></a><script async src="https://embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
</html>
<version>1.0</version>
<cache_age>3600</cache_age>
<provider_name>Flickr</provider_name>
<provider_url>https://www.flickr.com/</provider_url>
</oembed>
Parse the response content and construct a div content which could contain
File name
Author name
Provider name
Description or
Embed video content
And finally add the content to your HTML page.

Large number of likes but now realise it is to an invalid url

My site at www.kruaklaibaan.com (yes I know it's hideous) currently has 3.7 million likes but while working to build a proper site that doesn't use some flowery phpBB monstrosity I noticed that all those likes are registered against an invalid URL that doesn't actually link back to my site's URL at all. Instead the likes have all been registered against a URL-encoded version:
www.kruaklaibaan.com%2Fviewtopic.php%3Ff%3D42%26t%3D370
This is obviously incorrect. Since I already have so many likes I was hoping to either get those likes updated to the correct URL or get them to just point to the base url of www.kruaklaibaan.com
The correct url they SHOULD have been registered against is (not url-encoded):
www.kruaklaibaan.com/viewtopic.php?f=42&t=370
Is there someone at Facebook I can discuss this with? 3.7m likes is a little too many to start over with without a lot of heartache. It took 2 years to build those up.
Short of getting someone at Facebook to update the URL, the only option within your control that I could think of that would work is to create a custom 404 error page. I have tested such a page with your URL and the following works.
First you need to set the Apache directive for ErrorDocument (or equivalent in another server).
ErrorDocument 404 /path/to/404.php
This will cause any 404 pages to hit the script, which in turn will do the necessary check and redirect if appropriate.
I tested the following script and it works perfectly.
<?php
if ( $_SERVER['REQUEST_URI'] == '/%2Fviewtopic.php%3Ff%3D42%26t%3D370' ) {
Header("HTTP/1.1 301 Moved Permanently");
Header("Location: /viewtopic.php?f=42&t=370");
exit();
} else {
header('HTTP/1.0 404 Not Found');
}
?><html><body>
<h1>HTTP 404 Not Found</h1>
<?php echo $_SERVER['REQUEST_URI']; ?>
</body></html>
This is a semi-dirty way of achieving this, however I tried several variations in Apache2.2 using mod_alias's Redirect and mod_rewrite's RewriteRule, neither of which I have been able to get working with a URL containing percent encoded chars. I suspect that with nginx you may have better success at a more graceful way to handle this in the server.

Jquery-upload-progress cross domain issue. Suspected GET request problem

I am doing a site which submits a form to a different server. For upload progress tracking I use: for server side the NginxHttpUploadProgressModule und for client side - jquery-upload-progress. I have tested the setup by submitting the form to the same server and everything worked fine. Submitting to another server doesn't show the progress tracking(cross domain scripting). After hours of investigating this matter I came to the conclusion that the GET request generated by JQuery is at fault.
The query looks like this:
http://domain.com/upload/progress/?X-Progress-ID=39b2825934dbb2f33fe936df734ff840&callback=jsonp1249230337707&_=1249230345572
From the NginxHttpUploadProgressModule site:
The HTTP request to this location must have either an X-Progress-ID parameter or X-Progress-ID HTTP header containing the unique identifier as specified in your upload/POST request to the relevant tracked zone. If you are using the X-Progress-ID as a query-string parameter, ensure it is the LAST argument in the URL.
So, my question is how do I append the X-Progress-ID parameter to the end of the jquery GET request or set the X-Progress-ID header?
This doesn't work with jsonp(code from jquery.uploadProgress.js):
beforeSend: function(xhr) {
xhr.setRequestHeader("X-Progress-ID", options.uuid);
}
Currently the request is generated this way(code from jquery.uploadProgress.js):
jQuery.uploadProgress = function(e, options) {
jQuery.ajax({
type: "GET",
url: options.progressUrl + "?X-Progress-ID=" + options.uuid,
dataType: options.dataType,
success: function(upload) {
...
I solved the GET parameter problem(code from jquery.uploadProgress.js):
jQuery.uploadProgress = function(e, options) {
jQuery.ajax({
type: "GET",
url: options.progressUrl,
dataType: options.dataType,
data: "X-Progress-ID=" + options.uuid,
success: function(upload) {
...
Modified GET request looks like this:
http://domain.com/upload/progress/?callback=jsonp1249230337707&_=1249230345572&X-Progress-ID=39b2825934dbb2f33fe936df734ff840
The nginx webserver is now correctly responding.
However as Ron Evans pointed out the client side progress tracking part won't work unless NginxHttpUploadProgressModule is modified.
You simply cannot fire an XmlHttpRequest from a webpage, to a domain different from the page's domain. It violates security definitions that are default on all browsers.
the only thing that I can think of that you can do is to use Flash or Silverlight to initiate the progress calls (Flash and Silverlight can, given the correct crossdomain.xml setup, send async requests from the browser to preset list of domains)
or, setup a browser addin (say Firefox plugin, or IE ActiveX, or Embedded WinForm control) that can initiate calls without the same-domain restriction (as the request will not originate from the webpage, but from the browser itself)
You need to install the Apache module for upload status as well, just using the jQuery plugin will not work.
To respond to Ken, I suggest you familiarize yourself with JSONP spec, since JSONP was created specifically to handle cross-domain Javascript calls.
Anyhow, this code works great in Passenger/Apache WITH my modified Apache module. Without modifying the extension for Nginx it will not work with a JSONP call.
I made a minor modification that solved the problem for me, you can check it out here:
http://github.com/tizoc/nginx-upload-progress-module/commit/a40b89f63b5a767faec3c78d826443a94dc5b126

Resources