Razor CSS file location as Variable

Question

I am wrapping a razor view in an iframe. The razor view is a web service on a different domain.

Here is what I am doing:

<!DOCTYPE html>
<html>
<body>

<p align="center">
    <img src="http://somewhere.com/images/double2.jpg" />
</p>

<p align="center">
<iframe src="https://secure.somewhereelse.com/MyPortal?CorpID=12334D-4C12-450D-ACB1-7372B9D17C22" width="550" height="600" style="float:middle">
  <p>Your browser does not support iframes.</p>
</iframe>
</p>
</body>
</html>

This is the header of the src site:

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/cupertino/jquery-ui-1.8.21.custom.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
</head>

I want the iframe src to use the CSS of the calling site.

Is there a way to pass in the CSS URL or have it inherit the CSS of the calling site?

I'd even settle for the css file location being a parameter being passed in from the originating site.

Anyone have any suggestions?

Duplicate SO question: [CSS overide body style for content in iframe](http://stackoverflow.com/questions/6494721/css-overide-body-style-for-content-in-iframe). — Roddy of the Frozen Peas, Aug 07 '12 at 01:38

score 6 · Answer 1 · answered Aug 07 '12 at 01:38

You cannot enforce your css on your site using an iframe. The css must be included in the source of the page included in an iframe. It used to be possible but in certain cases using javascript, and for the page to be on the same domain.

The only other way you may be able to use your own css is if the web service allows you to pass in the url of the css. But you would have to consult the documentation of the web service to find that out.

score 5 · Accepted Answer · answered Aug 07 '12 at 10:37

I would pass the CSS url as an argument to the iframe's src attribute:

<iframe src="http://somedomain.com/?styleUrl=@(ResolveStyleUrl())"></iframe>

Where ResolveStyleUrl might be defined as:

@functions {

  public IHtmlString ResolveStyleUrl()
  {
    string url = Url.Content("~/Content/site.css");
    string host = "http" + (Request.IsSecureConnection ? "s" : "") + "//" + Request.Url.Host + url;
    return Raw(url);
  }

}

This is of course assuming that the domain would accept a style url query string and render the appropriate <link /> on the remote page?

score 5 · Answer 3 · edited May 23 '17 at 12:27

Eroc, I am sorry you cannot enforce your css on others' site using an iframe because most browsers will give an error like the one chrome gives:

Unsafe JavaScript attempt to access frame with URL http://terenceford.com/catalog/index.php? from frame with URL http://www.example.com/example.php. Domains, protocols and ports must match.

But this does not mean that you cannot extract the html from that page (which may be modified as per your ease)

http://php.net/manual/en/book.curl.php can be used for site scrapping with http://simplehtmldom.sourceforge.net/

First play with these functions:

curl_init();
curl_setopt(); 
curl_exec();
curl_close();

and then parse the html.

After trying yourself, you can look at this example below that I made for parsing beemp3 content, when I wanted to create a rich tool for directly downloading songs, unfortunately I couldn't because of the captcha but it is useful for you

directory structure

C:\wamp\www\try

-- simple_html_dom.php

-- try.php

try.php:

<?php
/*integrate results for dif websites seperately*/
require_once('simple_html_dom.php');
$q='eminem';
$mp3sites=array('http://www.beemp3.com/');
$ch=curl_init("{$mp3sites[0]}index.php?q={$q}&st=all");
curl_setopt($ch,CURLOPT_HEADER,0);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,true);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
//curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10); 
$result=curl_exec($ch);
curl_close($ch);
$html=str_get_html("{$result}");
$ret = $html->find("a");

echo "<head><style type='text/css'>a:link,a{font-size:16px;font-weight:bold;font-family:helvetica;text-decoration:none;color:#458;}a:hover{color:#67b;text-decoration:underline;}a:visited{color:silver;}</style></head>";
$unik=array(null);
foreach($ret as $link)
{
$find="/(.{1,})(\.php)[?](file=.{1,})&song=(.{1,})/i";
$replace="$4";
if(preg_match("{$find}",$link->href))
    {
    $unik[]=$link->href;
    if(current($unik)===prev($unik)){unset($unik);}
    else{
    echo "<a href='".$mp3sites[0].$link->href."'>".urldecode(preg_replace($find,$replace,$mp3sites[0].$link->href))."</a><br/>";
    }}
}
?>

I know that you do not code in php, but I think you are capable of translating the code. Look at this: php to C# converter

I spent time on this question because only I can understand what it means to offer bounty. May be the answer seems unrelated (because I have not used javascript or html based solution), but because of cross-domain issues this is an important lesson for you. I hope that you find similar libraries in c#. Best of luck

I always enjoy your answers and comments Nina. Another elegant, out of the box solution. — Troy Alford, Aug 09 '12 at 17:16

score 2 · Answer 4 · answered Aug 07 '12 at 17:06

The only way I know to achieve that is to make the HTTP request on your server side, fetch the result and hand it back to the user.

A minima, you'll need either to strip completely the header from the targeted site to inject the content in your page using AJAX, or to inject your own css in the page headers to put it into an IFRAME.

Either way you have to implement the proxy method, which will take the targetted URL as an argument.

This technique has many downsides :

You have to do the queries on you server, which can cost a lot of bandwidth and CPU
You have to implement the proxy
You cannot transmit the domain specific cookies from the user, though you can manage new cookies have by rewriting them
If you do a lot of requests you server(s) is/are likely to become blacklisted on the targeted website(s)

The benefits sound low compared to the hassles.

Razor CSS file location as Variable

4 Answers4