I created a WordPress Azure Website through the Azure Websites Gallery. I installed a theme called Bridge.
Everything is working quite fine...Except, I have no icons appearing on the desktop version of my site (through Chrome, Firefox and IE). I am seeing icons on my Windows phone. I am not seeing icons on the desktop site when I squeeze the window down to mobile phone size.
To give you some background to where this problem is potentially coming from…
I have used a custom domain. To make the WordPress site work with a custom domain, I have added this code to the wp-config.php file:
/*Emma added the below to fix permalink to be custom domain*/
define('WP_HOME','http://examplesite.com');
define('WP_SITEURL','http://examplesite.com);
The code above meant that once you clicked on a post or page and moved away from the homepage, the url was still examplesite.com/pagename instead of examplesite.azurewebsites.net/pagename.
So back to the icon issue…
The icons are displayed through using a font (font-awesome to be exact). I have the latest updates of the theme and the latest 4.2.0 version of the font is in the font files. The font files can be found here in my site:
wp-content > themes > bridge > css > font-awesome > fonts
I asked the Bridge theme team why the icons were not displaying. They replied:
This is happening because of cross-origin access is denied for your site. You should paste this code to htaccess file that is located in
WP installation directory:
<ifModule mod_headers.c>
Header set Access-Control-Allow-Origin: http://examplesite.com
</ifModule>
I do not have an .htaccess file because my site is running on Azure. From what I understand .htaccess files are linked to Apache. Instead of a .htaccess file, I have a web.config file and a web-config.php file because I installed this from Azure.
I created a .htaccess file in the root of my website and pasted the above code. Of course that didn’t work. I also looked up how to write the web.config version of the code and pasted that into the web.config file and that did not work (although with my little knowledge of this area, the syntax is probably wrong) and that didn’t work. See the code below:
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="http://examplesite.com" />
</customHeaders>
</httpProtocol>
I also added this to the web.config file and that hasn't worked:
<remove fileExtension=".svg" />
<remove fileExtension=".eot" />
<remove fileExtension=".woff" />
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
<mimeMap fileExtension=".woff" mimeType="application/x-woff" />
I have read that I need to also change the buildAction to "content", but not sure how to do that as when you click properties of files such as .woff, you don't seem to get that option.
I also played around with adding something to the web.config.php file under the custom code I wrote to get my domain to work, but that didn’t work either. Once again, not sure my code was correct.
I went back to the support team at the Bridge theme and they said that I should contact my hosting provider to do this for me because .htaccess can’t work on this type of server.
So, now I am not quite sure what to do.
Does anyone know the correct code I should put into my web.config, web-config.php or other file? Or, is there another issue here I am not understanding? Perhaps something as simple as adding something to the custom css to call to the font?
I wonder if there is a clue in the statement I made above...
"Everything is working quite fine...Except, I have no icons appearing on the desktop version of my site (through Chrome, Firefox and IE). I am seeing icons on my Windows phone. I am not seeing icons on the desktop site when I squeeze the window down to mobile phone size."
If I can see them on my phone, then surely that means at some point the icons are being rendered correctly?
I have had a look through my css files for a change in a way the site is rendered through media queries, but didn't find anything there either.
After many hours of searching for a solution I found this post: Windows Azure CDN and *.woff fonts
I copied this code into my web.config file as a child of system.webserver:
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Methods" value="HEAD,GET,OPTIONS" />
</customHeaders>
</httpProtocol>
That seemed to solve it! :)
Have tested in Chrome, FireFox, IE and mobile and all icons are now showing. Magic!
Related
Does anyone know how to get Acumatica screens to be embedded in an iFrame in a wordpress site? When embedding an Acumatica screen in wordpress - I see the login screen however - after successful login I receive a refused to connect error.
I tried modifying the X-Frame in the web.config file - however still no difference after login. Does anyone know what changes need to be made on the Acumatica site to allow this? Or is it possibly a change that needs to happen in wordpress?
I realize that we should look at integrating the SSO but conceptually would think that the iFrames would work with or without SSO being setup yet or am I wrong in that assumption?
the answer provided by Hugues is very valid, but in the scope of Same Site Cookies.
With iFrame you would generally get following exception:
The loading of “https://yoursite.acumatica.com/Main?HideScript=On” in a frame is denied by “X-Frame-Options“ directive set to “SAMEORIGIN“.
For a while solution was to add an explicit header X-Frame-Options and in ALLOW-FROM specify an uri to the site you would like to allow to open Acumatica in iFrame, this however is now outdated: X-Frame-Options
Currently suggested way would be to use frame-ancestors directive of the Content-Security-Policy (frame-ancestors)
For applications that run on IIS, like Acumatica, it is done by finding in web.config
<httpProtocol>
<customHeaders>
...
And modify and add to this clause line like following example:
<add name="Content-Security-Policy" value="frame-ancestors 'self' https://my.site1.com *.site2.net http://localhost:82" />
This is just a syntax example that will allow the Acumatica to be open in iFrame on same domain, on my.site1.com, wildcard for all subdomains on site2.net and on even on the site deployed locally on the server that listens 82 port. Please use last one (http://localhost:82) only for testing purposes.
So the end result in your web.config should look similar to that block (based on SalesDemo deployment):
<httpProtocol>
<customHeaders>
<remove name="X-Powered-By" />
<add name="Content-Security-Policy" value="frame-ancestors 'self' https://yourWordPressUri" />
</customHeaders>
</httpProtocol>
Hope this is helping
I believe you are running into a same-site cookie policy error. If the issue was cross site scripting error you wouldn't see the login page.
Same site cookie policy can be disabled in the web config file:
https://learn.microsoft.com/en-us/aspnet/samesite/system-web-samesite#using-samesite-in-aspnet-472-and-48
Change the web.config file settings as follows:
Step 1: Open the web.config file, which is located in the application instance folder.
Step 2: Find the <system.web> section and add the following line to this section:
Note! The first occurrence of <system.web> located in the < location > tag is not the needed section.
Step 3: Add the text highlighted in bold to the following lines:
<formsAuth loginUrl="Frames/Login.aspx" timeout="60" requireSSL="true" />
<sessionState cookieSameSite="None" cookieless="UseCookies" mode="Custom" customProvider="PXSessionStateStore" timeout="60" sessionIDManagerType="PX.Owin.SessionIdManager, PX.Owin">
I have a MVC site that I want to load into Iframe. I have added the X-Frame-Options to AllowAll. When I try to load the site, I can see the html document in developer tools but the IFrame in the Page is blank.
I tried to create a web application on localohost with different port number and where I tried to load the MVC site in Iframe, it didnt work.
I tried to add a html in the same MVC site and loading itself in the html's Iframe (assuming port issue but still it will not load).
Any help will be appreciated.
I recently ran into a similar issue. The X-Frame-Options header did not work for me. I had to use the Content-Security-Policy header. In the web.config file, I set it to frame-src https://my-domain.com like this:
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Content-Security-Policy" value="frame-src {your domain here}" />
</customHeaders>
</httpProtocol>
</system.webServer>
This is the error I'm receiving when trying to load CSS/less data:
I looked around StackOverflow for the same problem and I find out that I had to use an absolute URL for the stylesheets. I tried basically every combination of the URL where my stylesheets are located, but I still get the same error but only different link attached.
The stylesheets that I need to render are located in /client/stylesheets/less, but no matter what URL path I type, i get the same MIME/type error.
Can anyone be kind enough to point a fellow in the right direction?
Make sure the .css and .less extension are set up to use text/css as the MIME Type either on the server level or for your web application. You can add this MIME type to your web.config if you do not have access to the server level configuration.
<system.webServer>
<staticContent>
<remove fileExtension=".less" />
<mimeMap fileExtension=".less" mimeType="text/css" />
</staticContent>
</system.webServer>
The remove is included for if the setting is configured at the server level already to not cause a conflict.
Did you forget to install the less compiler?
meteor add less
I have a TinyMCE control on my ASPX.NET page. When the user clicks the "find" button on the control:
The find 'pop-up' appears with the error "This content cannot be displayed in a frame"
The puzzling thing is that for most users, the div/pop-up shows up fine (with the exact same browser version, IE8). Clearing cache and temporary internet files does not appear to resolve the issue.
This item is in the system.webserver node of the web.config
<httpProtocol>
<customHeaders>
<add name="X-Frame-Options" value="SAMEORIGIN" />
</customHeaders>
</httpProtocol>
Any ideas on how to resolve this issue? I am unable to reproduce, hitting the same website and performing the same action.
You could try to use the tinymce config parameter dialog_type:
dialog_type: 'modal'
Using modal dialogues the browsers won't have to open new windows.
I am upgrading from the old SecureWebPages that automates the switching between Http and Https content via web.config.
For some strange reason, having contents like:
<link type="text/css" href="assets/css/style.css" rel="stylesheet" />
no longer automatically loads from the appropriate https location. The console in Google Chrome shows me this:
The page at https://website.com/UserAccess.aspx ran insecure content from http://website.com/assets/css/style.css.
This behavior didn't exist when I was using the older SecureWebPages. In the past the above CSS statement works fine without any errors.
My web.config:
<securitySwitch mode="RemoteOnly">
<paths>
<add path="~/Register.aspx"/>
<add path="~/SSL.Master"/>
</paths>
Is there anything wrong with my configurations? Please advise. Thanks!
You need to tell SecuritySwitch to ignore your CSS folder, or even your entire Assets folder if it contains images and the like as well. Here is a path you can add to the securitySwitch section for the assets folder.
<securitySwitch mode="RemoteOnly">
<paths>
<add path="~/Register.aspx"/>
<add path="~/assets/" security="Ignore"/>
</paths>
</securitySwitch>
This will tell SecuritySwitch to ignore the assets folder, and everything under it. Also, your path for the master file does nothing, since .master files are never served to a browser.
I hope this helps!