Question

如何自定义Google文档视图iframe的CSS？

我意识到iframe正在从一个我无法控制的跨域源获取内容，我只是想知道是否有人对此有一些黑客攻击？

Answer 1

我问这个，所以我可以发布解决方案。它完全是hacky和based off of a an answer from another thread on SO。

我必须做一些修改才能使其正常工作，因为上面链接的答案与谷歌文档不太一致。

基本上你代理请求服务器端，修改html然后转发iframe内容。

<?php
if ( isset( $_GET['a'] ) && $_GET['a'] == 'gt') {
    // proxy xml content - must be done to avoid XSS failures (contains embedded link data and enables text selection)
    $code = gde_get_contents("https://docs.google.com/viewer?" . $_SERVER['QUERY_STRING']);
    header('Content-type: application/xml');
    echo $code;
} elseif ( isset( $_GET['a'] ) && $_GET['a'] == 'bi' ) {
    // proxy image content - prevents "too many redirects" on many-paged docs
    header( "Location: https://docs.google.com/viewer?" . $_SERVER['QUERY_STRING'] );
} elseif ( isset( $_GET['jsfile'] ) ) {
    // proxy javascript content - not doing anything here but Google changes return 404 if not proxied (??)
    $code = file_get_contents("https://docs.google.com/" . $_GET['jsfile']);  
    header('Content-type: text/javascript');  
    echo $code; 
} else {
  $content = file_get_contents('http://docs.google.com/viewer?url=http%3A%2F%2Fwww.someurlhere.com%2Fgoogledocs%2Ftest.docx&embedded=true');
  $content = str_replace('gview/resources_gview/client/js','/googledocs/index.php?jsfile=gview/resources_gview/client/js', $content);
  $content = str_replace('</head>','<link rel="stylesheet" href="http://www.example.com/google.css" /></head>', $content);
  header('Content-type: text/html; charset=utf-8');
  echo $content;  
}
?>

确保更改行：

file_get_contents('http://docs.google.com/viewer?url=http%3A%2F%2Fwww.someurlhere.com%2Fgoogledocs%2Ftest.docx&embedded=true');

到您尝试托管的iframe的适用网址。

同时更改行：

  $content = str_replace('</head>','<link rel="stylesheet" href="http://www.example.com/google.css" /></head>', $content);

链接到您的样式表。

Answer 2

除了你的答案之外，还有别的东西需要考虑。要捕获相对路径引用，可以将以下内容注入<head>：

<base href="http://docs.google.com/" target="_blank">

这样，他们的所有脚本都可以正确加载，而不需要正则表达式替换＆＃34; /或其他同样不稳定的东西。在您的PHP示例中：

$content = str_replace('<head>','<head><base href="http://docs.google.com/" target="_blank">', $content);

自定义Google Docs Viewer的CSS

2 个答案: