2019年9月

在多数现代浏览器中我们都可能会遇到图片跨域被阻止的问题,一般来说跨域问题主要出现在前后端分离,云架构的web系统中。 在两年前的时候通过网上的搜索勉强应付了问题,但是每次使用或多或少还会有需要解决的小问题。这次弄清楚了之后发现之前网上大多数也都是一知半解,并没有解决核心问题,所以导致了瞎试,碰运气的方式来处理。

首先html2canvas跨域问题的原因 我们希望将html渲染为canvas 进而渲染为图像,这就需要将html中的资源加载到临时的canvas中,而这个时候,如果资源和当前页面不同源,就会被canvas认为有污染拒绝加载。这是出于浏览器出于安全的角度做的一个设定。

在这个时候,我们需要做的其实比较简单,在所有因为跨域被拒绝的资源从服务端返回一个header

Access-Control-Allow-Origin: https://aaa.bbb.com
Access-Control-Allow-Methods: POST, GET, PUT, DELETE

诸如网上的一些都是,不需要的:

Access-Control-Expose-Headers: 
Access-Control-Allow-Credentials: true

以阿里云OSS跨域做个说明, 在阿里云OSS后台的基础设置中,我们可以添加跨域设置。 来源:http://aaa.bbb.com METHODS: GET,POST (如果只针对于显示图片 GET就可以了) 允许headers,暴露headers都留空即可。 缓存时间留空或者写一个秒为单位的数字即可。

设置完之后,正常的跨域上传、跨域访问图片就已经可以正常工作了。(比如阿里云的JSSDK上传)

但是我们在html2canvas的部分,依旧是会报跨域问题。 这里的原因是,我们没有在访问跨域图片的时候,发送 origin 参数,这个origin参数需要时我们刚才在后台允许的 来源列表中。

我们为图片或其他资源添加origin可以直接写入到元素中,也可以通过js来添加

<img src="......." crossorigin="https://aaa.bbb.com" > <!-- 图片会发送跨域来源 -->
// var img = new Image();  
// var img = document.querySelector('img');
img.src = "......"; // 图片地址
img.crossOrigin = "https://aaa.bbb.com"; // 跨域来源

这时,我们通过浏览器的开发者工具查看网络请求,即可以看到Request中有一项: Origin: https://aaa.bbb.com

此时跨域问题得到精确解决。


# 原代码
if (isset($value['r']) ) { // 对比属性值
    if(isset($array[$key]) && $array[$key]==$value['r']){
        $module  = str_replace('[if['.$value['v'].']if]',str_replace('::'.$key.'='.$value['r'].'::','',$value['v']), $module);
    }else{
        $module  = str_replace('[if['.$value['v'].']if]', '', $module);
    }
}else if(isset($value['i'])){// 是否含有属性
    if(isset($array[$key]) && strstr($value['i'],(string)$array[$key])){
        $module  = str_replace('[if['.$value['v'].']if]',str_replace('::'.$key.'^'.$value['i'].'::','',$value['v']), $module);
    }else{
        $module  = str_replace('[if['.$value['v'].']if]', '', $module);
    }
}else if(isset($value['sub'])){ // 是否含有子属性
    if( isset($array[$value['c'][0]][$value['c'][1]])){
        $module  = str_replace('[if['.$value['v'].']if]',str_replace('::'.$key.'::','',$value['v']), $module);
    }else{
        $module  = str_replace('[if['.$value['v'].']if]', '', $module);
    }
}else{
    if (isset($array[$key])) {
        $module  = str_replace('[if['.$value['v'].']if]',str_replace('::'.$key.'::','',$value['v']), $module);
    }else{
        $module  = str_replace('[if['.$value['v'].']if]', '', $module);
    }
}

# 优化后

$origin = '[if['.$value['v'].']if]';
$condit = isset($value['g']) && isset($value['r'])  ? '::'.$key.$value['g'].$value['r'].'::' : '::'.$key.'::' ;
$replacement = str_replace($condit,'',$value['v']);

if ( 
    !isset($value['g']) && !isset($array[$key]) ||
    # 不存在值且不存在对比

    in_array($value['g'], ['>','<','>=','<=','=']) && !(isset($array[$key]) && MIXER::compareValue($array[$key],$value['g'],$value['r'])) ||
    # 对比属性值

    $value['g']=='^' && !(isset($array[$key]) && strstr($value['i'],(string)$array[$key]) ) ||
    # 是否含有属性

    $value['g']=='.' && !(isset($array[$value['c'][0]][$value['c'][1]])) 
    # 是否含有子属性
) {

    $replacement = '';
}

$module  = str_replace($origin, $replacement, $module);

IF ELSE, ||, && 同属于短路逻辑 在效率上差不多,不需要遍历全部结果,而是有一个优先级的递进式判断。 用||来代替if 逻辑上并没有什么差别。只是在代码简洁上做一些优化。

使用三个变量来描述了一些过程中的临时变量,能够更好的理解这些变量在上下文中的含义,结构上也避免了重复的排布,让代码逻辑更加明确,但是理解成本略微增高,不像原版本中完全是平铺直叙的过程描述。

正则表达式的重要性不言而喻,平时写的时候都是拼拼凑凑感觉还是不太好,趁着今天做一个梳理,要让正则的用法深入血液才好。

MDN | Javascript 正则表达式介绍

正则表达式(regular expression)描述了一种字符串匹配的模式(pattern),可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。

创建一个正则表达式节

你可以使用以下两种方法之一构建一个正则表达式:

使用一个正则表达式字面量,其由包含在斜杠之间的模式组成,如下所示:

var re = /ab+c/; 使用正则表达式字面量为正则表达式提供了脚本加载后的编译。当正则表达式保持不变时,使用此方法可获得更好的性能。

或者调用RegExp对象的构造函数,如下所示:

var re = new RegExp("ab+c"); 使用构造函数为正则表达式提供了运行时的编译。使用构造函数的方式,当你知道正则表达式的模式将会改变,或者你不知道模式,并且从其他来源获取它,如用户输入。

- 阅读剩余部分 -

Wordpress drupal joomla

为了对照,我又选取了一个在GitHub上开源的轻量cms

lightcms

drupal 8.7.7 | 21,409 files 69.5Mb wordpress 5 | 2027 files 42.6Mb joomla 3 | 8344 files 37.1Mb

lightcms ? | 2275 files 16Mb

appsite ? | 1188 files 25.7Mb

最近正在做appsite框架传统网站架构的拓展、其中不免有SEO的部分。 在网上做了一点功课,meta中的 description比较关键,keywords据说已经不再受搜索引擎的关照了,不过这种事情现在不能盲目相信,既然做一个网站那么还是应该要照顾好关键词。但是没必要付出过高的人力成本,所以我这里想到的还是使用分词扩展来自动生成关键词。 这样做的好处是,无论搜索引擎是否在意关键词,我们有和内容相关度很高的关键词,这不会对我们带来损失。 基于程序算法生成的关键词,不需要我们花费人力成本,包括可以在后台控制是否开启该功能。

我这里选用的是对php支持比较好的 SCWS分词扩展。 如果分词的目的是更多的语义化分析、情感分析等,那还是应该考虑一下其他的分词库,不过基本上没有php支持。

进入正题

- 阅读剩余部分 -

因为最近的一个需求涉及到SEO 所以考虑用php写一套前台,这样可以根据url自动输出完整的页面,这里比较重要的是url rewrite 因为直接使用参数来访问页面一是不具备结构性,不方便基于文件夹管理php的前台页面,二是搜索引擎搜索方面也不友好。 所以要为后台添加一套自适应的rewrite。

以下是为一个SEO网站设计的结构

domain / home

  • /page | /class

  • /action

    • /id
  • ?querys

其URL示例为: https://domain/user/detail/12345/... https://domain/goods/list/... 经过重写转化为: https://domain/?abstract=user&functionality=detail&id=12345... https://domain/?abstract=goods&functionality=list...

今天和罗什孵化器的石总聊项目,我们提到了为了保证一些数据的真实性,需要引入区块链技术,这样我们可以避免像58同城这样的虚假信息漫布的问题。 我们聊了很多除了区块链以外的机制补充,还是很有成果的,但是对于区块链技术的实际实施,我考虑了一下,还是应该使用内部数据库来解决。

主要原因有:

1. 支撑能力有限。

搭建一个互联平台、提供的服务远远大于分布式记账的需要,我们也不是一个单纯的金融平台、我们有大量的数据并不敏感,而且是需要反复维护的,如果完全基于区块链来构建平台,是一种因噎废食的方式,既浪费空间,也会导致系统的容错率极低。

2. 不够灵活。

一个正式的互联网服务平台、需求是多种多样的,我们不能将所有信息全部都放到一个公开的信息链条上、最典型的就是用户的隐私数据,而且也没有这样的必要。如果完全基于区块链构建平台,那么就会导致我们本不需要额外做的隐私问题,需要再投入各种技巧来规避,而且是不能从根本上解决的。 用户隐私泄露、服务器风险增加等问题都不好处理。

为此,我设计了一种基于区块链的链式加密的内部区块系统、我称之为 Inner Block Chain 简称 I-BC

下面介绍一下,内区块链的可信度方案以及具体实现方式

- 阅读剩余部分 -